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Highcharts 中 文教 程 


来 源 : Highcharts 中 文教 程 


中 文教 程 开始 陆 陆 续 续 更 新 啦 ， 本 次 由 本 人 独立 完成 ， 参 考官 方 教程 及 根据 个 人 经 验 编写 ， 
由 于 工作 较 忙 ， 基 本 上 是 晚上 抽空 完成 ， 某 些 地 方 思 路 模糊 或 者 语言 表述 不 清楚 还 请 指正 。 
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(正文 完 ， 最 后 更 新 时 间 : 2015-09-06 23:43:24 ) 


Highcharts 入 门 (100% ) 


Highcharts 入门 
章节 进度 
已 完成 100%， 最 后 更 新 时 间 : 2014-01-30 
章节 目录 
。 Highcharts 简 介 
。 Highcharts 下 载 与 使 用 
。 Highcharts 配 置 
。 Helloworld 程 序 
Highcharts 兼 容 性 
Highcharts 使 用 许可 


(正文 完 ， 最 后 更 新 时 间 : 2014-07-23 15:52:27) 


Highcharts 简介 


Highcharts: 功 能 强大 、 开 源 、 美 观 、 图 表 丰 富 、 兼 容 绝 大 多 数 浏览 器 的 纯 jS 图 表 库 


Highcharts 是 一 款 纯 javascript 编 写 的 图 表 库 ， 能 够 很 简单 便捷 的 在 Web 网 站 或 Web 应 用 中 添加 交互 性 的 图 表 ，Highc 
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图 1-1 Highcharts Basic Chart 
由 于 其 功能 强大 、 简 单 易 用 、 开 源 免 费 等 优点 ，Highcharts 在 国内 外 越 来 越 受 欢 迎 。 下 面 详细 
说 明 Highcharts 的 优势 


Highcharts 优 势 

兼容 性 

Highcharts 支 持 目 前 CA 览 器 ， 包 括 IE6 +、iPhone/iPad、Android。Highcharts 在 标 
准 (W3C 标 准 ) 浏览 器 中 使 用 SVG 技术 泻 染 图 形 ， 在 遗留 的 IE 浏览 器 中 使 用 VML 技 术 来 绘 

图 Le] 

开源 免费 

针对 个 人 用 户 及 非 商 业 用 途 免费 ， 并 提供 源 代码 下 载 ， 你 可 以 任意 的 修改 它 。 商 业 用 途 需 要 
购买 许可 ， 个 人 及 非 商业 用 途 须 遵循 CC BY-NC 3.0 协 议 


纯 Javascript 


Highcharts 完 全 基于 本 地 浏览 器 技术 ， 不 需要 任何 插件 (例如 Flash、java) ， 不 需要 安装 任 
何 服务 器 环境 或 动态 语言 库 支 持 ， 只 需要 两 个 js 文件 即 可 运行 。 


图 表 类 型 丰富 


Highcharts 目 前 支持 直线 图 、 曲 线 图 、 面 积 图 、 曲 线 面积 图 、 面 积 范 围 图 、 曲 线 面积 范围 图 、 
柱状 图 、 柱 状 范围 图 、 条 形 图 、 饼 图 、 散 点 图 、 箱 线 图 、 气 泡 图 、 误 差 线 图 、 漏 斗 图 、 仪 表 
图 、 瀑 布 图 、 雷 达 图 ， 共 18 种 类 型 图 表 ， 其 中 很 多 图 表 可 以 集成 在 同一 个 图 形 中 形成 综合 

图 o 

动态 性 


提供 丰富 的 API 接 口 ， 方 便 在 创建 图 表 后 对 图 表 的 任意 点 、 线 和 文字 等 进行 增加 、 删 除 和 修改 
操作 。 支 持 众 多 的 Javascript 事 件 ， 结 合 jQuery、MooTools、Prototype 等 javascript 框 架 提供 

的 Ajax 接口 ， 可 以 实时 地 从 服务 器 取得 数据 并 实时 刷新 图 表 。 

多 轴 支 持 

对 于 需要 比较 的 数据 ，Highcharts 提 供 多 轴 支 持 。 并 且 可 以 针对 每 个 轴 设 置 其 位 置 、 文 字 和 样 
式 等 属性 。 

动态 提示 框 

当 息 标 巧 停 在 图 表 上 的 数据 点 时 ，Highcharts 会 显示 信息 提示 框 ， 当 然 ， 显 示 的 内 容 和 样式 可 
以 自己 指定 和 设置 。 

图 表 导 出 和 打印 功能 

你 可 以 将 Highcharts 图 表 导 出 为 PNG、JPG、PDF 和 SVG 格 式 文件 或 直接 在 网 页 上 打印 出 

图 表 缩 放 

可 以 设置 图 表 的 缩放 ， 让 你 更 方便 查看 图 表 数 据 。 

支持 外 部 数据 加 载 


Highcharts 支 持 多 种 数据 形式 ， 可 以 是 Javascript 数 组 、json 文 件 、json 对 象 和 表格 数据 等 ， 
这 些 数据 来 源 可 以 是 本 地 、 不 同 页 面 ， 其 至 是 不 同 网 站 。 


(正文 完 ， 最 后 更 新 时 间 : 2014-07-23 15:53:39) 


Liinhaharte 中 
FUUITICTIdaILS 


Highcharts 下 载 与 使 用 


下 载 即 可 运行 ， 看 例子 代码 就 可 以 入 门 


Highcharts 所 有 的 源 代码 及 例子 都 可 以 通过 官网 、 中 文 网 下 载 得 到 。 


下 载 


。 中 文 网 下 载 中 心 : http:/www.hcharts.cn/productdownload.php 

e 官方 下 载 : http://www.highcharts.com/download 

。 Github 开源 项 目 : https://github.com/highslide-software/highcharts.com 
。 中 文 网 开放 CDN : http://cdn.hcharts.cn 

。 官方 CDN 服务 : http://code.highcharts.com 


使 用 


解压 下 载 得 到 的 压缩 包 ， 进 入 相应 的 目录 查看 所 有 包含 文件 ，Highcharts 提供 的 文件 目录 如 
下 图 所 示 : 


目录 结构 说 明 : 


|-- examples 例子 目录 

|-- exporting-server ”导出 服务 器 目录 

|-- gfx 图 片 资源 目录 

|-- graphics 图 片 资源 目录 

|-- js 所 有 js 文件 源码 代码 ( 带 .Src 的 文件 为 未 压缩 版 源 代码 ) 
|-- index.htm 例子 入 口 文 件 


建议 初学 者 从 官方 提供 的 例子 代码 入 手 ，Highcharts 提供 的 丰富 例子 可 以 让 你 轻松 入 门 。 

由 于 官方 提供 的 例子 中 用 到 的 jquery.js 是 引用 google 的 服务 
(http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js) ， ag we 因 ， 
个 服务 在 国内 访问 并 不 稳定 (其 至 无 法 是 使 用 ) ， 导 致 打开 相应 的 例子 后 显示 ， 请 允 a 
“关于 从 官网 上 下 载 Highcharts 后 运行 例子 空白 的 说 明 " 或 直接 访问 pe 

在 线 实例 


e Highcharts 在 线 演 示 
e Highstock 在 线 演示 
。 Highmaps 在 线 演示 


Highcharts 下 开 与 便 睛 


开放 CDN 
如 果 你 想 直 接 引 用 在 线 资源 ， 建 议 使 用 中 文 网 提供 的 开放 CDN 服 务 。 


开放 CDN 服 务 


(正文 完 ， 最 后 更 新 时 间 : 2015-05-27 10:45:36 ) 


Highcharts 配 置 


只 需要 引用 两 个 JS 文件 即 可 运行 
Highcharts 的 运行 需要 两 个 JS 文件 ， highcharts.js 及 jQuery 、 MooTools 、Prototype 
、Highcharts Standalone Framework 常用 JS 框架 中 的 一 个 。 


引入 JS 文件 可 以 是 引入 本 地 文件 和 在 线 文 件 ， 针 对 不 同 的 JS 框架 需要 引入 的 文件 有 所 不 
同 ， 下 面 详细 说 明 。 


一 、 引 入 在 线 资 源 


1、jQuery 
jQuery 是 目前 使 用 最 广泛 的 JS 框架 ， 无 特殊 说 明 ， 本 教程 所 用 的 环境 及 所 有 例子 都 是 基于 
jQuery 的 。 


<script src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script> 
<script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script> 


2、Highcharts Standalone Framework 


jQuery 目前 用 的 最 广泛 ， 但 是 其 体积 过 大 (100K 以 上 ) ， 在 移动 端 网 络 带宽 有 限 的 情况 下 ， 
并 不 是 最 优选 择 ， 如 果 你 的 页 面 没 有 其 他 地 方 需要 用 到 jQuery，jQuery 仅仅 用 于 
highcharts， 这 种 情况 可 以 考虑 使 用 Highcharts Standalone Framework ，Highcharts 
Standalone Framework 压缩 后 的 大 小 只 有 2k 哦 。 


<script src="http://cdn.hcharts.cn/highcharts/adapters/standalone-framework.js"></script> 
<script src="http://cdn.hcharts.cn/highcharts/highcharts.js" ></script> 


:Al 
关于 使 用 Highcharts Standalone Framework 的 实例 及 注意 事项 

见 : http://highcharts.me/article/19 

3、MooTool 或 Prototype 

使 用 MooTools 或 Prototype 需要 额外 的 引入 Highcharts 提供 的 适配器 。 使 用 MooTools 需 
要 引入 的 文件 如 下 : 


<script src="http://cdn.hcharts.cn/mootools/MooTools-Core-1.5.1.js"></script> 
<script src="http://code.highcharts.com/adapters/mootools-adapter.js"></script> 
<script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script> 


Highcharts 中 文教 程 


使 用 Prototype 需要 引入 的 文件 如 下 : 


<script src="http://cdn.hcharts.cn/prototype/prototype-1.7.2.js"></script> 
<script src="http://code.highcharts.com/adapters/prototype-adapter.js"></script> 
<script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script> 


二 、 引 入 本 地 文件 


上 节 说 到 Highcharts 所 有 JS 文件 都 可 以 通过 下 载 获得 ， 如 果 你 不 想 引 入 在 线 资源 ， 可 以 直 
接 引 入 本 地 文件 。 


本 地 引入 文件 同 在 线 引 入 ， 这 里 拿 jQuery 来 举例 说 明 


<script src="js/jquery.min.js"></script> 
<script src="js/highcharts.js"></script> 


三 、 高 级 功能 

Highcharts 提供 了 图 表 导 出 、 图 表 主 题 等 其 他 额外 功能 ， 这 些 功 能 的 实现 ， 需 要 额外 引入 相 
关 JS 文件 。 

1、 图 表 导 出 功能 


导出 功能 是 将 图 表 导 出 下 载 为 常见 图 片 文件 或 PDF 文档 的 功能 ， 想 要 使 用 这 个 功能 ， 额 外 引 
入 exporting.js 即 可 


<script src="http://cdn.hcharts.cn/highcharts/modules/exporting.js" type="text/javascript 








nthly Average Temperature 


Source: WorldClimate.com 








2、 图 表 主 题 


Highcharts 配 置 10 


Highcharts 提供 图 表 更 换 主 题 功 能 ， 引 入 想 应 的 主题 JS 文件 即 可 改变 图 表 样 式 。 除 默认 主题 
样式 外 ，Highcharts 官方 提供 多 款 主 图 ， 你 也 可 以 根据 需要 自己 设计 图 表 主 题 。 


Highcharts 提供 的 主题 文件 放置 在 /js/themes/ 目录 下 ， 给 图 表 添 加 灰色 (Gray) 主题 的 代 


码 是 : 


<script src="http://cdn.hcharts.cn/highcharts/themes/gray.js" type="text/javascript"></sc 


4| i: ?| 








(正文 完 ， 最 后 更 新 时 间 : 2015-12-04 12:08:04) 


Hello World 程 序 


本 人 精通 c、c++、java、C#、Ruby、Perl、Lisp、Python、Objective-C、 


ActionScript、Pascal、JavaScript、PHP、ASP 等 语言 的 HelloWorld 程 序 编写 


新 建 一 个 html 文 件 ， 将 highcharts 引 入 到 你 的 页 面 后 ， 通 过 两 个 步骤 我 们 就 可 以 创建 一 个 简单 
的 图 表 了 。 


1、 创 建 div 容 器 
在 页 面 的 body 部 分 创建 一 个 div， 并 指定 div 的 id， 高 度 和 宽度 ， 代 码 如 下 
<div id="container" style="min-width:800px;height:400px"></div> 


2、 编 写 Highcharts 代 码 


编写 Highcharts 必 须 的 代码 ， 用 <script></script> 包 庄 ， 代 码 可 以 放 在 页 面 的 任意 地 方 ， 一 个 
最 简单 的 图 表 实例 代码 如 下 


$(function () { 


$('#container').highcharts({ // 图 表 展 示 容 器 ， 与 div 的 id 保 持 一 致 
chart: { 
type: 'column' // 指 定 图 表 的 类 型 ， 上 默认 是 折线 图 (line) 
title: { 
text: 'My first Highcharts chart' // 指 定 图 表 标 题 
}, 
xAxis: { 
categories: ['my'，'first',，'chart']  // 指 定 x 轴 分 组 
}, 
yAxis: { 
title: { 
text: 'something' // 指 定 y 轴 的 标题 
了 
}, 
series: [{ // 指 定数 据 列 
name: 'Jane', // 数 据 列 名 
data: [1, 0, 4] // 数 据 
] 攻 
name: 'John', 
data: [5, 7, 3] 
}] 
}); 


}); 


完成 上 述 两 个 步骤 后 ， 保 存 文件 并 用 浏览 器 打开 ， 运 行 结果 如 下 图 所 示 


My first Highcharts chart 


a jane 图)ohn 


something 


图 1-5 My first chart 
在 线 试 一 试 
上 述 例子 完整 html 代 码 如 下 <small> 你 可 以 拷贝 保存 为 html 文 件 运 行 即 可 看 到 效果 </small> 


<html> 
<head> 
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"> 
<script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/highcharts.js"></ 
<script> 
$(function () { 
$('#container').highcharts({ 
chart: { 
type: "column' 


}, 
title: { 

text: "My first Highcharts chart' 
}, 
xAxis: { 

categories: ['my', 'first', 'chart'] 
}, 
yAxis: { 

title: { 

text: 'something' 

} 

}, 


series: [{ 
name: 'Jane', 
data: [1, 0, 4] 
}, { 
name: "John '， 
data: [5, 7, 3] 
}] 


}); 
了 


</script> 
</head> 


<body> 

<div id="container" style="min-width:800px;height:400px;"></div> 
</body> 
</html> 











至 此 ， 我 们 已 经 初步 了 解 和 学 会 了 自己 编写 简单 的 Highcharts 图 表 了 ， 这 只 是 开始 ， 后 面 的 会 


如 何 学 习 Highcharts 


Highcharts 的 配置 (或 者 说 Highcharts 代 码 ) 是 一 个 json 字符 串 ， 类 似 

于 {chart:{type:"spline"}} ，json 具 有 易于 人 阅读 和 编写 的 特点 ， 所 以 学 习 和 开发 Highcharts 
并 不 难 ， 只 是 熟悉 API 程 度 的 问题 。 所 以 本 教程 的 重点 是 带 大 家 熟悉 API 文 档 加 一 点 点 处 理 技 
巧 ， 更 多 的 是 靠 大 家 花 时 间 学 习 和 实践 。 


准备 知识 


。 熟悉 Html、jQuery、Json、Ajax 等 前 端 知识 
e 至 少 会 一 种 后 人 台 语 言 ， 例 如 Php、Java、asp 等 (Highcharts 只 是 做 数据 展现 ， 具 体 的 数 
据 来 源 必须 通过 动态 语言 


几 点 建议 


。 任何 东西 的 掌握 必须 通过 自我 实践 
。 多 看 API，Highcharts 提 供 的 API 文 档 非 常 完善 ， 几 乎 所 有 的 问题 都 可 以 在 API 找 到 解决 办 
法 


(正文 完 ， 最 后 更 新 时 间 : 2015-05-22 12:49:19) 


Highcharts 兼 容 性 


忆 


兼容 所 有 现代 浏览 器 ， 适 配 主流 js 框架 
Highcharts 完 全 基于 本 地 浏览 器 技术 ， 不 需要 任何 插件 ， 甚 至 不 需要 安装 任何 服务 器 环境 ， 只 
需要 两 个 js 文件 即 可 运行 。Highcharts 针 对 不 同 的 js 框架 jQuery、Mootools、Prototype 做 了 适 
配 工作 ， 不 同 框架 开发 人 员 不 需要 再 额外 学 习 其 他 框架 即 可 上 手 。 


highcharts 可 以 运行 在 任何 现代 浏览 器 ， 包 括 移动 终端 以 及 IE6， 标 准 的 浏览 器 用 sve 技术 演 
数 图 表 ， 对 于 遗留 的 浏览 器 ， 则 用 vML 来 绘图 。 


浏览 器 厂商 浏览 器 名 支持 版 本 
Microsoft Internet Explorer 6.0 + 
Mozilla Firefox 2.0 + 
Google Chrome 1.0 + 
Apple Safari 4.0 + 
Opera Opera 9.0 + 
Apple iOS(Safari) 3.0 + 
Google Android Borwser 2.0 二” 


说 明 : 对 android 浏 览 器 部 分 支持 ， 点 击 查看 详细 。 


Javascript 框 架 支 持 


目前 已 经 测试 过 的 框架 及 版 本 如 下 


JQuery Mootools Prototype 
1.8.2 1.4.5 1:7 
2 上 3 跑 
1.6.2 1 2.5 
蝶 5 哆 
1.4.4 
32 


其 他 版 本 都 能 正常 使 用 只 是 没有 测试 。 


图 表 泻 染 引擎 及 性 能 


不 同 的 济 | ， 现 在 大 多 数 浏览 器 支持 sve ， 0 








持 ， 这 些 较 老 的 浏览 器 用 vML 绘制 图 表 ， 针 对 不 同 浏览 器 图 表 绘 制 性 能 测试 结果 如 下 
浏览 器 及 版 本 使 用 的 泻 染 技术 性 能 
Internet Explorer 9 SVG 非常 快 
Internet Explorer 8 VML Be 
Internet Explorer 7 VML 慢 
Internet Explorer 6 VML 慢 
Firefox SVG 非常 快 
Chrome SVG 非常 快 
Safari SVG 非常 快 
Opera SVG 非常 快 
iOS Safari SVG 快 
Android 3+ SVG 快 
Android 2.x Canvas 慢 


Android 2.X 


Android 2.x 没有 提供 SVG 支持 ， 针 对 Android 2.x，Highcharts 开发 出 基于 canvg 的 独立 泻 染 
器 ， 但 是 其 有 如 下 限制 : 


数据 提示 框 数据 共享 总 是 启用 ( 即 tooltip.shared = true ) 


图 表 在 第 一 次 


共享 
泻 当 时， 会 从 code. i com i canvg 泻 数 器 + rgbcolorjs + 
canvg.js (包含 在 同 


一 个 文件 里 ) ， 这 个 地 址 可 以 通过 global.canvasToolsURL 属性 指 


je 


定 。 
图 表 和 数据 列 (series) 动画 效果 无 效 (无 动画 效果 ) 
点 击 图 例 (legend) 无 法 显示 或 隐藏 数据 列 (series) 
数据 列 (series) 和 数据 点 (point) 的 触摸 事件 无 效 
图 表 缩 放 (zoom) 无 效 


使 用 泻 当 API 直接 添加 图 形 到 图 表 上 无 效 


(正文 完 ， 最 后 更 新 时 间 : 2015-09-11 09:47:09) 
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Highcharts 使 用 许可 


开源 != 免费 
Highcharts 是 一 款 开源 图 表 库 ， 开 源 但 不 完全 免费 。Highcharts 针 对 个 人 用 户 及 非 商业 用 途 免 
费 ， 商 业 用 途 需 要 购买 授权 。 
1、Free - Non-commercial 
针对 个 人 用 户 及 非 商 业 用 途 免 费 。 


使 用 时 请 遵守 CC BY-NC 3.0 (Creative Commons Attribution-NonCommercial 3.0 License) 
协议 。 


CC BY-NC 3.0 中 文 详 情 请 参考 : 署名 - 非 商业 性 使 用 3.0 中 国 大 陆 (CC BY-NC 3.0 CN) 


2、Commercial and government licenses 


针对 商业 用 户 及 政府 的 商业 授权 许可 ， 商 用 License 分 为 三 种 : 网 站 授权 、 开 发 者 授权 、OEM 
授权 。 


Highcharts 商 用 授权 费用 详 见 下 图 : 


Highcharts Highstock Highmaps Highslide 





序号 License 名 称 价格 (元 》 服务 旨 (和 %)* 
#1 Highcharts Single Website 900 10 
Highcharts Single developer 3900 
ve 8 
Maintenance and Support for Highcharts Single developer * 3100 
Highcharts 5 developers 15000 
3 6 
Maintenance and Support fr Highcharts 5 developers * 12000 
Highcharts 10 developers 25000 
其 4 二 
Maintenance and Support for 10 Highcharts developers * 20000 
#5 Highcharts OEM License 邮件 咨询 


更 多 关于 商用 授权 信息 详 见 : Licenses 代 理 页 面 


(正文 完 ， 最 后 更 新 时 间 : 2014-06-24 18:40:52) 


Highcharts 基 础 教程 (67% ) 


章节 进度 
已 完成 93%， 最 后 更 新 时 间 : 2015-09-29 


章节 目录 


Highcharts 主要 组 成 
。 图 表 配 置 

e 标题 

e 坐标 轴 

e 数据 列 

e 颜色 

e 数据 提示 框 

。 图 例 

e 版 权 信 息 


e@ 标示 区 
e 图 表 缩 放 
e 语言 文字 


。 标签 及 字符 串 格 式 化 


(正文 完 ， 最 后 更 新 时 间 : 2015-09-29 20:01:48) 


Highcharts 主 要 组 成 


通常 情况 下 ，Highcharts 包 含 标题 (Title) 、 坐 标 轴 〈Axis) 、 数 据 列 〈Series) 、 数 据 提 示 
框 (Tooltip) 、 图 例 〈Legend) 、 版 权 信 息 (Credits) 等 ， 高 级 的 还 包括 导出 功能 按钮 
(Exporting) 、 标 示 线 (PlotLines) 、 标 示 区 域 (PlotBands) 等 。 


Highcharts 基 本 组 成 部 分 如 下 图 所 示 


Monthly Average Temperature 
ree: W iClimate com 





图 2-1 Highcharts 基 本 组 成 部 分 


Highcharts 主 要 组 成 


Title 

图 表 标 题 ， 包 含 标题 和 副标题 (subTitle) ， 其 中 副标题 是 非 必 须 的 。 

Axis 

坐标 轴 ， 包 含 x 轴 (xAxis) 和 y 轴 (yAxis) 。 通 常情 况 下 ，X 轴 显示 在 图 表 的 底部 ，y 轴 显示 在 
图 表 的 堪 侧 。 多 个 数据 列 可 以 共同 使 用 同一 个 坐标 轴 ， 为 了 对 比 或 区 分 数据 ，Highcharts 提 供 
了 多 轴 的 支持 。 

Series 


数据 列 。 图 表 上 一 个 或 多 个 数据 系列 ， 比 如 曲线 图 中 的 一 条 曲线 ， 柱 状 图 中 的 一 个 柱 形 。 


Tooltip 


数据 提示 框 。 当 鼠标 悬 停 在 菜 点 上 时 ， 以 框 的 形式 提示 该 点 的 数据 ， 比 如 该 点 的 值 ， 数 据 单 
位 等 。 数 据 提 示 框 内 提示 的 信息 完全 可 以 通过 格式 化 函数 动态 指定 。 


Legend 


图 例 。 用 不 同形 状 、 顾 色 、 文 字 等 标示 不 同 数据 列 ， 通 过 点 击 标示 可 以 显示 或 隐藏 该 数据 
列 O 
Credits 


图 表 版 权 信 息 。 显 示 在 图 表 右 下 方 的 包含 链接 的 文字 ， 默 认 是 Highcharts 官 网 地 址 。 通 过 指定 


credits.enabled=false 即 可 不 显示 该 信息 。 


Exporting 


导出 功能 按钮 。 通 过 引入 exporting.js 即 可 增加 图 表 导 出 为 常见 文件 功能 。 


PlotLines 


标示 线 (或 辅助 线 ) 。 可 以 在 图 表 上 增加 一 条 标示 线 ， 比 如 平均 值 线 ， 最 高 值 线 等 。 


PlotBands 
标示 区 域 (分 辨 带 ) 。 可 以 在 图 表 添 加 不 同 颜 色 的 区 域 带 ， 标 示 出 明显 的 范围 区 域 。 


(正文 完 ， 最 后 更 新 时 间 : 2014-11-21 09:23:29 ) 


图 表 配 置 (Chart ) 


本 节 主 要 讲解 图 表 配 置 ， 对 应 的 API 位 置 为 chart ， 主 要 内 容 包 括 图 表 全 局 样式 、 绘 图 区 、 
图 表 事件 、 等 相关 内 容 。 


Highcharts 实例 化 中 绑 定 容器 的 方式 有 两 种 1、 通 过 dom 调用 highcharts() 函数 的 方式 


$("#container").highcharts({ 
// Highcharts 配置 


}); 


2、 通 过 chart.renderTo 来 指定 


var charts = new Highcharts.chart({ 
// Highcharts 配置 
chart : { 
renderTo : "container" // 注意 这 里 一 定 是 ID 选择 器 


Highcharts 图 表 的 高 度 和 宽度 是 根据 DIV 容器 的 宽 高 来 设 定 的 ， 即 
<div id="container" style="width:400px;height:400px"></div> 


己 


如 果 容 器 没有 设 定 宽 高 ， ， 默认 是 宽 400px ， 高 400px ， 另外 设置 容器 的 min-width 属性 可 


以 让 highcharts 自 适应 宽度 ， 实 例 : 


<div id="container" style="min-width:400px;height:400px"></div> 


特别 说 明 : 人 饼 图 中 可 以 通过 设置 宽 高 来 让 图 形 填充 满 整 个 容器 


2、 图 表 样 式 
图 表 样 式 属性 包括 border、backgroundColor、margin、spacing、style 等 


e 边框 : 包括 borderColor、borderRadius、borderWidth 
| 


。 背景 : 包括 backgroundColor 


。 外 边 距 : 包括 margin、marginTop、marginRight、marginBottom 、marginLeft 
。 内 边 距 : 包括 spacing、spacingTop、spacingRight、spacingBottom、spacingLeft 
e 其 他 样式 : 其 他 属性 例如 字体 等 属性 ， 实 例 代码 


chart : { 
style : { 
fontFamily:"", 
fontSize:'12px', 
fontweight:'bold', 
color: '#006cee! 


另外 还 可 以 通过 chart.className 来 绑 定 CSS 类 并 给 定 CSS 样式 。 


3、 图 表 绘 图 区 
图 表 绘 图 区 的 可 配置 属性 有 : 


局 旦 


。 plotBackgroundColor : 绘图 区 背景 颜色 
。 plotBackgroundlImage : 绘图 区 背景 图 片 
e。 plotBorderColor : 绘图 区 边框 颜色 

e。 plotBorderWidth : 绘图 区 边框 宽度 

。 plotShadow : 从 图 投影 


、 事 件 


click : 图 表 点 击 事件 ， 效 果 见 在 线 演示 

load : 图 表 加 载 完 后 事件 ， 效 果 见 在 线 演示 
addSeries : 图 表 增 加 序列 事件 ， 效 果 见 在 线 演示 
drilldown : 图 表 下 外 事件， 效果 见 在 线 演示 
drillup : 图 表 上 钻 事件 ， 效 果 见 在 线 演示 
redraw : 图 表 重 绘 事件 ， 效 果 见 在 线 演示 
selection : 图 表 范 围 选择 事件 ， 效 果 见 在 线 演 示 
afterPrint : 图 表 打 印 前 事件 

beforePrint : 图 表 打 印 后 事件 


Oo2DpDamnmAwmnN 一 


四 、 其 他 配置 


1、 图 表 类 型 


通过 chart.type 来 指定 图 表 类 型 ， 表 示 如 果 默 认 图 表 类 型 ， 即 如 果 series 中 没有 指定 
type， 那 么 图 表 的 类 型 就 由 该 属性 来 确定 。highcharts 支持 的 所 有 图 表 类 型 见 


plotoptions ° 


2、 图 表 缩 放 
图 表 缩放 包括 缩放 (zoom) 和 平移 (pan) ， 对 应 的 属性 有 : 


e。 ZoomType : 缩放 类 型 ， 可 以 是 水 平 缩放 、 坚 直 缩 放 、 平 面 缩放 ， 对 应 的 时 设置 
zoomType 为 she NN YE NW XY 

缩放 恢复 按钮 : 可 以 指 逢 入 和 的 们 式 。 位 置 等 ， 见 resetZoomButton， 按 钮 的 文字 可 以 
通过 lang 中 的 属性 来 指定 


selectionMarkerFill : 


。 panning : 是 否 启 用 平移 ， 启 用 平移 后 ， 按 住 平移 键 既 可 以 使 用 鼠标 对 图 表 进 行 平移 操 
作 


。 panKey : 平移 键 ， 上 默认 是 “Shift*， 即 在 启用 平移 后 ， 按 住 指定 的 按键 即 可 对 图 表 进 行 平 
移 操作 ， 在 线 实例 


3、3D 属性 
Highcharts 4.0 开始 支持 3D 图 表 类 型 ， 目 前 支持 3D 柱 形 图 、3D 人 饼 图 、3D 散 点 图 。 3D 相 
关 属 性 见 : chart.options3d ， 关 于 3D 图 形 的 详细 教程 将 以 单独 文章 形式 给 出 。 
4、 其 他 
。 图 表 反 转 : 图 表 反 转 指 的 是 将 图 表 的 X 轴 和 y 轴 进行 对 调 操作 ， 对 应 的 只 需要 设置 


chart .Inverted = true 即 可 9 

e@ 图 表 动 画 : chart.animation 可 以 设置 图 表 的 全 局 动画 效果 ， 这 里 的 动画 指 的 是 图 表 更 
新 时 的 动画 效果 ， 而 图 表 初 始 化 的 动画 是 在 plotOoptions.series.animation 中 启用 和 关 
闭 的 。 

e 图 表 自 适应 : 前 面 说 过 通过 设置 图 表 容 器 的 min-width 可 以 让 图 表 自 适应 ， 这 个 开关 对 
应 的 属性 是 chart.reflow ， 另 外 ， 还 可 以 通过 API 接口 chart.reflow 在 外 部 对 图 表 进 
行 自 适应 操作 ， 实 例 见 这 里 


(正文 完 ， 最 后 更 新 时 间 : 2015-08-09 18:01:50 ) 


标题 (Title ) 


标题 默认 显示 在 图 表 的 顶部 ， 包 括 标题 和 副标题 (subTitle) ， 其 中 副标题 是 非 必 须 的 。 设 置 
标题 和 副标题 的 示例 代码 如 下 : 


title: { 

text: ' 我 是 标题 ' 
}, 
subtitle: { 

text: ' 我 是 副标题 ' 
} 


一 、 标 题 的 常用 属性 


标题 只 有 一 些 文字 信息 ， 所 以 标题 的 配置 无 非 是 一 些 定位 、 字 体 大 小 、 闫 色 等 的 配置 ， 常 见 
属性 如 下 表 所 示 : 


属性 名 描述 默认 值 
text 标题 的 文字 "Chart title" 
align 文字 水 平 对 齐 方式 ， 有 left、center 、 right 可 选 "center" 


verticalAlign ”文字 重 直 对 齐 方式 ， 有 top、middle、bottom 可 选 i 


是 否 解 析 html 标 签 ， 设 置 解 析 后 ， 可 以 使 用 例如 a 等 
html 标 签 


floating 是 否 浮动 ， 设 置 浮动 后 ， 标 题 将 不 占用 图 表 区 位 置 false 


标题 和 图 表 区 的 间隔 ， 当 有 副标题 时 ， 表 示 标 题 和 副 标 


USeHTML 人 


margin i 15 
文字 样式 ， 可 以 设置 文字 颜色 、 字 体 、 字 号 ， 注 意 和 
style CSS 有 略微 的 不 同 ， 例 如 font-size 用 fontSize 、font- A 
family 用 fontFamily 表 示 fontSize: 
'16px'} 
X 相对 于 水 平 对 齐 的 偏 移 量 ， 可 以 是 负数 ， 单 位 是 px 0 
y 相对 于 垂直 对 齐 的 偏 移 量 ， 可 以 使 负数 ， 单位 是 px 0 


更 多 关于 标题 的 属性 请 参考 AP| 文 档 : title 


二 、 动 态 设 置 和 获取 标题 
1、 获 取 标 题 内 容 


可 以 通过 Highcharts 对 象 获 取 标 题 内 容 ， 实 例 代 码 如 下 


var chart = new Highcharts.Chart(options ) ; // 人 
var title = chart.title.textStr; // 通过 chart 对 象 获取 标题 内 容 


2、 动 态 设 置 标题 


Highcharts 提 供 了 setTitle() 函数 供 动态 设置 标题 用 ， setTitle() 函数 结构 如 下 


setTitle (Object title, object subtitle, Boolean redraw) 
参数 说 明 : 


e title : 标题 对 象 
e Subtitle: 副标题 对 象 
e redraw : 是 否 重 绘 ， 即 设置 标题 后 是 否 重新 绘制 图 表 ， 上 默认 是 false 


实例 说 明 : 


var title = { 
text:" 我 是 新 标题 "， 
style:{ 
color:"#ff0O000" 
} 


}; 


var chart = new Highcharts.chart(); 
chart.setTitle(title); 


上 述 方法 不 仅仅 是 
字号 的 ， ete 示例 代码 如 下 


Var subtitle = { 
style:{ 
color:"#000", 
fontweight:"bold" 


} 
}; 
var chart = new Highcharts.chart(); 
chart.setTitle(null, subtitle); // 设 置 副 标题 ， 第 一 个 参数 设置 为 null 
在 线 试 一 试 


三 、 关 于 标题 的 常见 问题 

1、 如 何在 标题 中 添加 链接 

实现 方法 : 

设置 useHTML 为 true， 然 后 在 标题 文字 中 加 入 a 标 签 


实例 : 


设置 标题 的 文字 ， 有 的 时 候 我 们 可 能 只 需要 更 改 标题 的 样式 ， 例 如 颜色 、 


title :7{ 
USeHTML :true, 


text:"Highcharts 中 文 网 | <a href='http://www.hcharts.cn' target='_blank'> 中 文教 程 </a>" 
} 


了 一 最 





2、 如 何 隐 藏 (不 显示 ) 标题 
实现 方法 : 


设置 标题 文字 为 空 即 可 


实例 : 
title :{ 
text:null 
} 


(正文 完 ， 最 后 更 新 时 间 : 2015-06-10 11:09:59) 


Highcharts 中 文教 程 


坐标 轴 (Axis ) 


所 有 的 图 表 除了 饼 图 都 有 X 轴 和 Y 轴 ， 黑 认 情况 下 ，X 轴 显示 在 图 表 的 底部 ，y 轴 显示 在 左 便 
(多 个 y 轴 时 可 以 是 显示 在 左右 两 侧 ) ， 通 过 设置 chart.inverted = true 可 以 让 X， y 轴 显示 
位 置 对 调 。 下 图 为 图 表 中 坐标 轴 组 成 部 分 


Average Monthly Weather Data for Tokyo 
Source: WoridClimate com 





multiple axis 















国 Rainfall 9 . ae b 
“e+ Sea-Level Pressure axls gridLines A 
-全 Temperature or 
PE 此 25°C 1016 mb 六 
ye 思 名 
四 蕊 
三 习 可 
= 3 
三 20C 8 1014 mb 全 
> 了 
ex e 
a " 
100 mm 区 15°C 1012 mb 5 
. 中 
本 
axis labels 1 
50 mm Wm ea 和 一 一 站 省 -让 一 i0°C 1010 mb 
0 mm $C 1008 mb 
jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec 
NR Highchars. corm 
一 > zr A 
图 表 坐 标 轴 组 成 部 分 


一 、 坐 标 轴 组 成 部 分 
1、Axis Title 


坐标 轴 标 题 。 黑 认 情 况 下 ，X 轴 为 null (也 就 是 没有 title ) ，y 轴 为 'value' ， 设 置 坐标 轴 标 
题 的 代码 如 下 : 


XAxis:{ 
title:{ 
text:'x 轴 标题 ' 
} 


yAxis:{ 
title:{ 
text:'y 轴 标题 ' 
} 


} 


更 多 关于 Axis Title 铅 性 请 查看 API| 文 档 相 关内 容 xAxis .title、yAxis .title 。 


2、Axis Labels 


坐标 轴 标 签 (分 类 ) 。Labels 常 用 属性 有 enabled 、 formatter 、 setp 、 staggerLines 


1) enabled 


坐标 轴 (Axis) 28 


是 否 启 用 Labels。x，y 轴 默认 值 都 是 true ， 如 果 想 禁用 (或 不 显示 ) Labels， 设 置 该 属性 
为 false 即 可 。 


2) Formatter 


标签 格式 化 函数 。 默 认 实现 是 : 


formatter:function(){ 
return this.value; 
} 


this.value 代码 坐标 轴 上 当前 点 的 值 (也 就 是 x 轴 当 前 点 的 x 值 ，y 轴 上 当前 点 的 y 值 ) ， 除 
了 value 变量 外 ， 还 有 axis 、 chart 、 isFirst 、 isLast 可 用 。 例 如 调用 this.isFirst 的 结 
果 如 下 图 所 示 


40 xAxis.labels.formatter:functionO{ return this.isFirst; } 





true false false 


| -全 Series 1 | 
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Custom Labels formatter 
1 


另外 一 个 例子 ， 实 现 更 高 级 的 自 定 义 格式 化 函数 ， 截 图 如 下 : 


第 二 等 级 (200) 





Mr 一 


第 二 等 级 (150) 


Mr 


第 一 等 级 (100) 


rr 


第 一 等 级 (50) 


第 一 等 级 (0) 


Custom Labels 
formatter 2 


实现 代码 如 下 : 


yAxis: { 
labels: { 
formatter:function(){ 

if(this.value <=100) { 
return "第 一 等 级 ("+this.value+")"; 

}else if(this.value >100 && this.value <=200) { 
return "第 二 等 级 ("+this.value+")"; 

}else { 
return "第 三 等 级 ("+this.value+")"; 


} 
} 
}, 


3) Step 
Labels 显 示 间 隔 ， 数 据 类 型 为 number (或 int) 。 下 图 说 明了 step 的 用 法 和 作用 


Monthly Average Te 





设置 yAxis: {labels : { step:2 }}Y 轴 变化 对 比 图 


Temperature CC) 


Y Lables width step 


4) staggerLines 


水 平 轴 Lables 显 示 行 数 。 (该 属性 只 对 水 平 轴 有 效 ) 当 Lables 内 容 过 多 时 ， 可 以 通过 该 属性 控 
制 显 示 的 行 数 。 和 该 属性 相关 的 还 有 maxStaggerLines 属 性 。 


更 多 关于 Lables 的 属性 请 查看 API 文 档 xAxis.labels、yAxis.labels 
3、Axis Tick 


Tick 为 坐标 轴 刻 度 。 默 认 情 况 下 xX 轴 刻度 高 ( tickLength 属性 ) 为 5pX， 宽 为 1px ; y 轴 宽 为 
0px( 也 就 是 不 显示 刻度 )。Tick 相 关 的 属性 主要 


有 tickLength 、 tickwidth 、 tickColor 、 tickInterval 、 tickmarkPlacement “ 


1) tickLength 、tickWidth 、 tickColor 


分 别 代 表 刻 度 线 的 长 度 、 宽 度 、 颜 色 。 
2) ticklnterval 


刻度 间 隔 。 其 作用 和 Lables. step 类 似 ， 就 是 不 显示 过 多 的 X 轴 标签 内 容 ， 不 同 的 
是 ， tickinterval 是 真正 意义 上 的 调整 刻度 ， 而 Lables.step 只 是 调整 Labels 显 示 间 隔 。 所 
以 在 实际 应 用 中 ， tickInterval 用 的 多 。 


针对 不 同 数据 类 型 的 坐标 轴 有 不 同 的 默认 值 。 对 于 线性 数据 和 Datetime 类 型 数据 ， 其 默认 值 
是 tickPixellnterval 值 ， 对 于 categorty 表示 间隔 一 个 category 。 


关于 tickInterval 的 作用 ， 请 访问 博客 中 相关 内 容 《如 何 处 理 Highcharts X 轴 数据 过 多 时 显 
示 问 题 》。 


3) tickmarkPlacement 


刻度 线 对 齐 方 式 ， 有 between 和 on 可 选 ， 默 认 是 between 。 设 置 为 on 后 的 变化 如 下 图 : 


jan 
Tokyo: 7°C 


Apr May 





xAxis tickmarkPlacement on 

更 多 关于 Tick 的 属性 请 查看 API 文 档 。 

4、Axis gridLines 

坐标 轴 网 格 线 。 上 默认 情况 下 ，x 轴 网 格 线 宽度 为 0,y 轴 网 格 线 宽度 为 1px。 网 格 线 共有 三 个 属性 


可 设置 ， 分 别 是 : gridLinewidth 、 gridLinecolor 、 gridLineDashstyle 


1) gridLineWidth 


网 格 线 宽度 。X 轴 默认 为 0，y 轴 默认 为 1px。 
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2) gridLineColor 

网 格 线 颜 色 。 黑 认为 : #cgcecg 。 

3) gridLineDashStyle 

网 格 线 线条 样式 。 和 Css border-style 类 似 ， 常 用 的 有 : solid 、 Dot 、Dash 。 


下 图 为 自 定义 x 和 y 轴 的 gridLines 效 果 图 
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Custom gridLines 


4、multiple Axis 


多 个 轴 。 在 Highcharts 中 ， 坐 标 可 以 是 多 个 ， 最 常见 的 是 多 个 y 轴 。 多 轴 存 在 时 ，Axis 是 一 个 
数组 ， 而 在 赋值 时 ， 通 过 Axis 数组 的 下 标 与 数据 关联 。 如 下 图 所 示 : 


({ MAMAvic ) 
AXIS 


yAxis: [{ re 本 二 生计 于、 汪 0 


opposite: true 
}, 4 





},4 


oppositre: true 


hh 2、opposite:true 表 y 轴 显示 在 右 侧 ，x 
3、 在 serirs 数 组 中 ， 图 (type:'spline')， 这 





series: [{ 
type: line', 
YAxis: 2, + 2 
data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4/) 194.1, 95.6, 54.4], 
a | 
type: spline’ 
yAxis: 1, + 
daca: [1016, 1016, 1015.9, 1015.5, 1012.3,| 1009.5, 1009.6, 1010.2, 1013.1, 1016.9, 1018.2, 1016.7])， 
二 | 
YAxis:3, 
type: column’, 
data:T[7?.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]， 











1] 
About multiple Axis 


总 结 如 下 : 


e series 中 设置 每 个 轴 值 时 ， 用 轴 数 组 下 标 关联 。 

e 设置 opposite: true 表示 该 轴 位 置 反 转 ， 即 为 y 轴 时 显示 在 右 侧 ， 为 X 轴 时 显示 在 顶部 
(和 正常 情况 下 x 轴 在 下 ，y 轴 左 构成 反 转 ) 。 

e 在 series 中 可 以 设置 该 轴 的 类 型 ， 多 个 轴 不 同 的 类 型 (例如 : type:'spline') ， 就 构成 了 
多 种 图 表 并 存 的 混合 图 。 


更 多 关于 多 轴 、 混 合 图 请 查看 在 线 演示 平台 的 两 个 (Y) 轴 的 混合 图 、 多 个 (Y) 轴 的 混合 图 。 


二 、 坐 标 轴 类 型 


坐标 轴 中 ， 可 以 通过 Type 指定 坐标 轴 类 型 ， 
有 linear 、 logarithmic 、 datetime 、 category 可 选 ， 默 认 是 : linear 。 指 定 类 型 的 实 


例 代 码 如 下 : 


// The types are 'linear', 'logarithmic' and 'datetime' 
yAxis: { 
type: 'linear', 


} 
// Categories are set by using an array 
xAxis: { 
categories: ['Apples', 'Bananas', 'Oranges'] 
} 
1、linear 


线性 轴 。 默 认 类 型 ，x 轴 按照 Axis,tickIinterval 值 增长 ， y 轴 上 默认 是 自 适应 。 


2、logarithmic 


对 数 轴 。 按 照 数学 中 的 对 数 增长 ， 例 如 1,2,4,8... 用 的 不 多 ， 主 要 用 于 对 数 图 表 ， 实 例 请 查看 
在 线 演示 平台 的 对 数 直 线 图 。 
3、datetime 


时 间 轴 。 时 间 使 用 和 Javascript 日 期 对 象 一 样 ， 即 用 一 个 距 1970 年 1 月 1 日 0 时 0 分 0 秒 的 毫秒 数 
表示 时 间 ， 也 就 是 时 间 玲 。 更 多 Javascript 日 期 对 象 请 阅读 W3C school 相关 内 容 。 


Highcharts 有 很 多 时 间 格 式 化 函数 ， 列 举 如 下 : 
1) Date.getTime() 
获取 当前 时 间 惟 。 实 例 用 法 如 下 : 


time = Date.getTime();  //time = 1384442746969 (ms) 当前 时 间 为 2013-11-14 23:25:46 


2) Date.UTC(year,month,day,hours,minutes,seconds,millisec) 


通过 UTC 方式 获取 指定 时 间 的 毫秒 数 ， 例 如 获取 2013-11-14 00:00:00 的 毫秒 数 代码 如 下 : 


time = Date.UTC(2013,11,14,0,0,0,0); // time = 1386979200000 (ms); 


3) Highcharts.dateFormat(String format) 


Highcharts 时 间 格 式 化 函数 ， 同 PHP 格 式 化 函数 。 具 体 用 法 参考 API 文 档 
Highcharts.dateFormat()) ， 当 然 ， 在 本 教程 的 《函数 使 用 》 章 节 中 具体 讲解 。 


4、category 


数组 轴 。 用 的 最 多 也 最 简单 ， 这 里 就 不 多 说 ， 更 多 请 查看 在 线 演示 平台 例子 。 


三 、 动 态 更 新 及 其 他 相关 属性 


1、 动 态 更 新 


坐标 轴 可 以 通过 函数 实现 动态 更 新 ， 在 图 表 绘制 完毕 后 ， 你 可 以 任意 的 对 你 更 改 而 不 需要 重 
绘 。 所 有 相关 函数 都 在 Axis 中 ， 本 教程 将 在 《函数 使 用 》 章 节 具 体 讲 解 。 


2、 其 他 相关 属性 
出 了 Axis 中 的 属性 可 以 对 坐标 轴 有 影响 外 ， 还 有 其 他 属性 也 可 以 对 其 起 作用 。 列 举 如 下 : 
1) reversed 


图 表 反 转 ， 即 chart.reversed ， 当 其 值 设置 为 true 时 ，X 轴 和 y 轴 显示 的 位 置 对 调 。 详 情 请 
查看 在 线 演 示 平 台 轴 反 转 的 曲线 图 。 


2) **allowDecimals** 

控制 数 轴 是 否 显 示 小 数 。 

3) *min ~、 max** 

控制 数 轴 的 最 小 值 和 最 大 值 。 


注意 : 控制 allowDecimals、min、max 属性 你 可 以 轻松 控制 数 轴 的 显示 范围 等 《这 也 是 很 党 
见 的 问题 ) 


4) opposite 


轴 倒 置 。 和 [reversed 不 同 的 是 ， 倒 置 是 将 轴 倒 置 而 不 是 x、y 对 调 。 例 如 y 轴 倒置 的 结果 是 y 轴 是 
从 最 大 的 值 开始 的 ， 最 小 值 反而 在 最 下 方 。 


5) plotLines 


\ 


标示 线 ， 详 见 : http://www.hcharts.cn/docs/index.php?doc=basic-plotLines 


6) plotBands 


标示 区 域 ， 详 见 : http://www.hcharts.cn/docs/index.php?doc=basic-plotBands 


(正文 完 ， 最 后 更 新 时 间 : 2014-06-24 19:18:07) 


数据 列 (Series ) 


数据 列 配置 是 Highcharts 最 复杂 也 是 最 灵活 的 配置 ， 如 果 说 Highcharts 是 灵活 多 变 ， 细 
节 可 定制 的 话 ， 那 么 数据 列 配置 就 是 这 个 重要 特性 的 核心 
一 、 什 么 是 数据 列 
数据 列 是 一 组 数据 集合 ， 例 如 一 条 线 ， 一 组 柱 形 等 。 图 表 中 所 有 点 的 数据 都 来 自 数 据 列 对 
象 ， 数 据 列 的 基本 构造 是 : 


series : [{ 
name : 
data : [] 
}] 


提示 : 数据 列 配置 是 个 数组 ， 也 就 是 数据 配置 可 以 包含 多 个 数据 列 。 

数据 列 中 的 name 代表 数据 列 的 名 字 ， 并 且 会 显示 在 数据 提示 框 (Tooltip) 及 图 例 
(Legend) 中 。 

二 、 数 据 列 中 的 数据 

在 数据 列 的 data 属性 中 ， 我 们 可 以 定义 图 表 的 数据 数组 ， 通 常 有 三 种 定义 方式 : 


1、 数 值 数组 。 在 这 种 情况 下 ， 配 置 数 组 中 的 数值 代表 站 值 ，X 值 则 根据 X 轴 的 配置 ， 要 么 自 
动 计 算 ， 要 么 从 0 起 自 增 ， 或 者 是 根据 pointstart 及 pointInterval 自 增 ; 在 分 类 轴 中 ， 
X 值 就 是 categoies 配置 ， 数 值 数 组 配置 实例 如 下 : 


data : [1, 4, 6, 9, 10] 


在 线 试 一 试 


2、 包 含 两 个 值 的 数组 集合 。 在 这 种 情况 下 ， 集 合 中 数组 的 第 一 个 值 代表 XX， 第 二 个 值 代表 
Y ; 如 果 第 一 个 值 是 字符 串 ， 则 代表 该 点 的 名 字 ， 并 且 X 值 会 如 1 中 所 说 的 情况 决定 。 数 组 
集合 的 实例 : 


datai JS | 3 82 


在 线 试 一 试 (注意 例子 是 xy 轴 对 调 的 ) 


3、 数 据点 对 象 集合 。 在 这 种 情况 下 ， 集 合 中 元 素 都 是 数据 点 对 象 ， 对 象 中 可 以 配置 数据 见 
plotoptions.series 或 plotOptions.{ 图 表 类 型 } 所 列 。 配 置 实 例 : 


name : "point 1", 
color : "#00ff00", 
y :0 

}, { 
name : "Point 2", 
color : "#ffQOQff", 
YS 

}] 


在 线 试 一 试 


另外 ， 通 过 这 种 方式 还 可 以 增加 额外 变量 ， 详 见 例子 : 增加 额外 变量 


三 、 数 据点 及 标记 


在 直角 坐标 图 〈 即 常规 的 包含 X、Y 轴 的 图 表 ) 中 ， 数 据点 相当 于 图 表 中 的 一 个 (Xx,y) 点 。 数 
据点 的 配置 可 以 在 数据 列 中 是 数据 数组 里 指定 。 对 于 其 他 类 型 的 图 表 〈 非 直角 坐标 图 ) ， 数 
据点 不 仅仅 表示 X，Y 值 ， 例 如 在 范围 图 中 ， 数 据点 包含 x，low，high 值 ;在 OHLC (蜡烛 
柱状 图 ) 中 ， 数 据点 包含 Xx，open ，high，low ，close ; 在 饼 图 或 仪表 图 中 ， 数 据点 只 表示 
一 个 值 。 


数据 点 配置 适用 所 有 图 表 ， 下 面 的 例子 说 明了 如 何 指定 某 个 点 的 颜色 : 


series : [{ 
data : [ 29,9, 71.5, 106.4, 


{ 

y : 200, 

color : "#BFOB23" 
104 0 20] 


}] 


在 直线 图 、 曲 线 图 、 面 积 图 及 面积 范围 图 中 可 以 为 数据 点 指定 标记 ， 可 以 是 某 种 形状 ， 图 片 
等 ， 实 例 : 
series : [{ 
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6,148.5, 
y: 216.4, 
marker: { 
fillColor: '#BFOB23', 


radius: 10 


} 
}, 194.1, 95.6, 54.4] 
}] 


更 多 关于 数据 点 标记 见 API 文 
档 : http://www.hcharts.cn/api/index.php#plotOptions.series.marker 


四 、 数 据 列 配置 


数据 列 共 有 三 个 级 别 的 配置 ， 权 重 从 低 到 高 依次 如 下 : 
。 配置 在 plotOptions.series 中 


对 应 的 API 为 : http://www.hcharts.cn/api/index.php#plotOptions.series 中 ， 针 对 所 有 类 
型 图 表 有 效 ， 一 般 是 通用 配置 。 


。 配置 在 plotOptions.{ 图 表 类 型 } 中 


对 应 的 API 为 : http://www.hcharts.cn/api/index.php#plotOptions 下 的 指定 图 表 类 型 ， 
针对 当前 类 型 图 表 有 效 ， 一 般 是 某 一 种 图 表 的 通用 配置 。 


。 配置 在 series 中 
对 应 的 API 为 : http://www.hcharts.cn/api/index.php#series ， 针 对 当前 数据 列 有 效 


以 上 三 中 方式 自 上 往 下 权重 依次 递增 的 ， 也 就 是 配置 在 series 中 的 属性 会 覆盖 plotOptions 中 
的 配置 。Highcharts API 的 这 种 层级 关系 体现 了 API 设计 的 继承 性 和 灵活 性 。 


相关 内 容 : 论坛 帖子 


下 面 列举 数据 列 的 一 些 常用 属性 


1、 动 画 (Animation ) 


Highcharts 图 表 默 认 是 以 动画 的 形式 展现 图 形 加 载 过 程 的 ， 可 以 通过 series.animation 或 
plotoptions.series.animation 来 指定 动画 相关 配置 (是 否 启 用 动画 ， 动 画 效 果 等 ) 。 


2、 闫 色 (Color) 


可 以 通过 series.color 来 指定 数据 列 的 颜色 ， 通 过 plotOptions.{ 图 表 类 型 }.color 来 给 某 一 种 类 
型 的 图 表 设 定 闫 色 。 


3、 点 的 选择 (point Selection ) 


Y-values 


100 


jan Feb Mar 


通过 设置 allowPointSelect = true 可 以 使 数据 点 可 选择 


plLotoptions: { 
series: { 
allowPointSelect: true 
} 
} 


对 应 的 获取 选中 的 点 是 通过 chart.getselectedpoints() 子 数 来 实现 的 
var selectedPoints = chart.getSelectedPoints(); 

在 线 试 一 试 

提示 : 按 住 CTRL 或 SHIFT 键 可 以 多 选 

4、 线 条 宽度 (lineWidth) 


Line width 


300 


200 


Y-values 
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可 以 通过 lineWidth 来 指定 线条 宽度 


series: [{ 
data: [216.4, 194.1, 95.6], 
linewidth: 5 

}] 


在 线 试 一 试 


5、 和 饼 标 形状 (cursor ) 


cursor 属性 可 以 指定 鼠标 形状 ， 即 指定 当 和 鼠标 巧 停 在 数据 列 上 时 对 应 的 鼠标 样式 〈 当 配置 了 


数据 列 点 击 事件 时 ) 。 


6、 数 据 标签 (dataLables ) 
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Monthly Average Temperature 
Source: WorldClimate.com 
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数据 标签 指 的 是 在 数据 点 上 显示 一 些 数据 信息 标签 ， 对 应 的 API 为 
http://www.hcharts.cn/api/index.php#series.data.dataLabels 


plotoptions: { 
line: { 
dataLabels: { 
enabled: true 
} 


数据 标签 默认 显示 当前 数据 点 的 点 值 ， 可 以 通过 formatter 函数 或 format 来 对 其 格式 化 。 


plotoptions: { 
line: { 
dataLabels: { 
enabled: true, 
formatter: function() { 
return this.x + " Wt ha yy 
}, 


// format: "{x} {y}" 


在 线 试 一 试 


7、 线 条 样式 (Dash Style) 
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Highcharts.com 
dashStyle 可 以 指定 线条 的 样式 


series: [{ 
datar a 3 2 0 /G03 0 6 
dashstyle: 'longdash' 

}] 


在 线 试 一 试 


8、zones 


我 们 经 常会 遇 到 这 样 的 需求 : 用 不 同 颜 色 标 识 出 不 同 范围 的 值 ， 例 如 90-100 用 绿色 表示 ， 
60-80 用 蓝 色 表示 ， 小 于 60 用 红色 表示 。 在 Highcharts 4.1 之 前 ， 我 们 可 以 通过 plotBands 
来 标识 出 不 同 范围 值 对 应 的 背景 (效果 见 实例 ) ， 或 者 用 plotLine 画 一 条 标识 线 〈 见 教 
程 ) ， 还 可 以 用 不 同 颜 色 标 记 出 点 的 颜色 ， 这 些 解 决 方案 都 有 自己 的 用 途 ， 但 在 某 些 情景 下 
并 不 是 最 优 方案 。 


Highcharts 4.1 增加 了 一 个 非常 牛 逼 的 新 特性 : Zones， 先 来 看 个 例子 : 


Result Javascript Html 


对 应 的 代码 也 很 简单 : 


$(function() { 
$('#container').highcharts({ 
series: [{ 
data: [-10, -5, 0, 5, 10, 15, 10, 10, 5, 0, -5], 
zones: [{ 
value: 0, 
color: '#f7a35c', 
dashstyle: 'dot' 
}, 
value: 10, 
color: '#7cb5ec' 
}, { 
color: '#90Qed7d'! 
}] 


在 线 试 一 试 
可 以 看 到 Zones 是 个 数组 ， 常 见 的 属性 有 value，color，dashStyle 


Value 表示 对 超过 这 个 值 的 区 域 有 效 
color 对 当前 范围 设置 颜色 
dashStyle 对 当前 范围 设置 线条 颜色 


fillColor 对 当前 范围 设置 填充 颜色 (针对 面积 图 ) 


zones 默认 的 是 针对 Y 轴 ， 可 以 通过 zoneAxis =X 来 指定 当前 配置 是 针对 X 轴 ， 实 例 : 


$(function() { 
$('#container').highcharts({ 
title: { 
text: "Zone with dash style' 


}, 
subtitle: { 
text: "Dotted line typically signifies prognosis' 
}, 
xAxis: { 
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun’', 'Jul', 'Aug', 'Sep', ' 
}, 


series: [{ 
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95 
zoneAxis: 'x', 
zones: [{ 
value: 8 


{ 
dashstyle: 'dot' 


}] 





在 线 试 一 试 
提示 : 


1、 对 于 x 轴 的 zones 的 value 值 表示 的 是 X 轴 下 标 2、zones 数组 里 的 每 个 对 象 具有 继承 
性 ， 相 同 的 属性 会 覆盖 前 一 个 配置 


在 Highcharts 中 ， 数 据 列 的 配置 是 个 非常 重要 的 配置 ， 同 时 又 由 于 可 配置 的 属性 非常 对 ， 配 
置 的 灵活 性 非常 高 ， 需 要 大 家 自己 自己 体会 和 理解 ， 关 于 数据 陪 的 详细 配置 将 会 在 【图 表 类 
型 章节 详细 说 明 】 


(正文 完 ， 最 后 更 新 时 间 : 2015-09-10 13:45:09 ) 
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闫 色 (colors) 

本 节 详 细 说 明了 图 标 中 线条 磊 色 、 文 字 磊 色 等 和 颜色 相关 的 内 容 。 

一 、 数 据 列 颜色 

Highcharts 中 数据 列 的 颜色 是 通过 colors 来 指定 的 ，colors 是 个 颜色 值 数组 ， 默 认 是 : 


colors: ['#7cb5ec', '#434348', '#90ed7d'， '#f7a35c', '#8085e9', 
'#f15c80', '#e4d354', '#8Q85e8', '#8d4653', '#91e8el1'] 


共有 10 个 默认 闫 色 ， 你 可 以 修改 颜色 值 或 增加 颜色 个 数 来 自 定 义 图 表 数 据 列 颜色 。 


数据 列 调用 颜色 的 方式 是 第 n 个 数据 列 使 用 第 n 个 颜色 数组 里 的 值 ， 当 序列 的 数量 超过 颜色 
数组 的 长 度 ， 后 续 的 序列 将 会 从 头 调用 。 


Chart title 


Slice ee \ » Slice 
/ \ 了 








Slice 


Slice 


Slice 
Slice 
Highcha 


在 线 试 一 试 
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二 、 柱 形 图 的 颜色 
柱 形 图 (包括 柱状 图 、 条 形 图 等 ) 里 一 组 柱 形 颜色 是 一 样 的 ， 很 多 人 对 此 表示 不 理解 


Monthly Average Rainfall 


Source: WorldClimate.com 


Jan Feb Mar Apr May JjJun Jul Aug Sep Oct Nov Dec 


国 Tokyo 


250 


200 


150 


10 


KainTall (Mm) 
© 


5 


© 


© 
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series: [{ 

name: 'Tokyo', 

data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] 
}] 


ER 
通过 代码 我 们 知道 ， 一 组 柱 形 是 属于 同一 个 数据 列 的 ， 所 以 他 们 的 颜色 当然 时 一 样 的 。 


你 可 能 想到 下 面 的 这 种 方法 : 


series: [{ 
name: "Column series", 
data: [{ 
y:49.9, 
color:"#ff0O000" 


}, 
// ..， 省 略 代码 
] 

}] 


这 是 在 上 一 节 "“ 数 据 列 " 中 说 到 的 颜色 赋值 方式 ， 用 这 种 方法 虽然 可 以 实现 想 要 的 效果 ， 但 是 如 
果 分 别 对 每 个 数据 列 赋值 ， 显 然 不 合理 。 
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shared: true, 
useHTML: true javaScript 250 


SOUTTCE. WOTIOUCITTaATE. CO 


}, 
plotOptions: { 
column: { 200 
pointPadding: 0.2, 


borderWidth: 0 
} 
}; 150 
series: [{ 
name: 'Tokyo', 
data: [{ ® 100 
y:49.9, 
color:'#££0000" 
bn TlieD, L106, T2962, T4470 50 
T1716.0, 135.6;. 148,.5; 2160.4; 工 94.1 95.6, 54.4] 
}] | 
jy 0 
AS ve A 


}); a 


Rainfall (mm) 


Highcharts.com 


highcharts 直接 提供 对 柱 形 图 同 数 据 列 设置 颜色 ， 属 性 是 : colorByPoint 


API 给 出 的 说 明 是 : 


this option determines whether the chart should receive one color per series or one color 


ER 





即 colorByPoint 决定 了 图 表 是 否 给 每 个 数据 列 或 每 个 点 分 配 一 个 颜色 ， 默 认 值 是 false ， 即 默 
认 是 给 每 个 数据 类 分 配 颜 色 ， 设 置 为 true 则 是 给 每 个 点 分 配 颜 色 。 


设置 colorByPoint = true 后 的 效果 见 下 图 


TOUCOEEOEMAG? TADLBDIR NN ~ er TI 
shared: true, javaScript Source: WorldClimate.com 
useHTML: true 

js 250 

plotOptions: { 
column: { 


pointPadding: 0.2, 200 
borderWidth: 0 
} 
} 7 
plotOptions:{ 159 


column:{ 
colorByPoint:true 
' 100 
}, 
series: [{ 
name: '‘'Tokyo', 
//colorByPoint:true， 或 者 直接 写 在 数据 50 
列 里 
data:: [157 T1064, 129.2;: T1440, 
1T76.07 L135.6; T4857 ZL16.4» T94d,.1i 956 Sa.4] 0 


}] Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov 


Rainfall (mm) 


]} ) 7 Tokyo 
)) 


在 线 试 一 试 
其 他 图 形 可 以 用 colorByPoint 
通过 搜索 API 文档 可 以 知道 其 他 图 表 也 可 以 用 到 colorByPoint 这 个 属性 


e bar 条 形 图 
e column 柱状 图 
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。 columnrange 柱状 范围 图 
。 heatmap 热力 图 
e treemap 


。 waterfall 瀑布 图 
e boxplot 箱 线 图 


注 : API 文档 搜索 功能 很 强大 ， 请 好 好 利用 


三 、 图 表 中 文字 闫 色 


图 表 中 所 有 文字 都 设置 字体 、 顾 色 等 样式 ， 一 般 是 通过 style.color 来 设置 文字 闫 色 的 ， 
style 里 可 以 用 的 属性 如 下 所 示 : 


style: { 
color: “'#ff0000 ' ， 
fontSize: "12px", 
fontweight: "blod", 
fontFamily: "Courier new" 


下 面 列 举 图 表 中 常见 文字 的 配置 位 置 : 


标题 样式 : title.style 及 subtitle.style 

坐标 轴 标 签 样式 : xAxis.lables.style 及 yAxis.lables.style 
图 例文 字样 式 : legend.itemStyle 

数据 提示 框 文字 样式 : tooltip.style 


DD 


总 之 请 自行 在 API 文 档 上 搜索 ， 图 表 中 任何 文字 都 是 可 以 精准 控制 的 。 


(正文 完 ， 最 后 更 新 时 间 : 2015-06-03 22:24:06 ) 


数据 提示 框 (Tooltip) 
数据 提示 框 指 的 当 息 标 巧 停 在 茶点 上 时 ， 以 框 的 形式 提示 该 点 的 数据 ， 比 如 该 点 的 值 ， 数 据 


单位 等 。 数 据 提示 框 内 提示 的 信息 完全 可 以 通过 格式 化 函数 动态 指定 ; 通过 设置 
tooltip.enabled = false 即 可 不 启用 提示 框 。 


Chart title 
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200 
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Values 
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-@- Series 1 
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一 、 提 示 框 外 观 


下 面 的 实例 代码 给 出 了 关于 数据 提示 框 的 外 观 的 常用 配置 


tooltip: { 

backgroundColor: '#FCFFC5'， // 背景 颜色 
borderCcolor: 'black', // 边框 颜色 
borderRadius: 10, // 边框 圆 角 
borderwidth: 3, // 边框 宽度 
shadow: ture, // 是 否 显 示 阴 影 
animation: true // 是 否 启 用 动画 效果 
style: { // 文字 内 容 相 关 样 式 


color: "#ff0000"， 
fontSize: "12px", 
fontweight: "blod", 
fontFamily: "Courir new" 


提示 : 背景 颜色 也 可 以 设置 为 渐变 


在 线 试 一 试 


二 、 提 示 框 内 容 

数据 提示 框 的 目的 是 为 了 展示 数据 点 相关 的 数据 ， 具 体 展示 的 内 容 完 全 可 以 通过 多 种 灵活 的 
方式 来 实现 。 

1、 格 式 化 函数 

formatter 


数据 提示 框 格式 化 函数 ， 功 能 最 强大 也 是 最 灵活 的 方法 ， 函 数 里 this 关键 字 代 表 着 当前 数 
据点 对 象 ， 常 用 的 变量 有 : 


。 this.x : 当前 点 X 值 

。 this.y /this.point[i].y : 当前 点 的 Y 指 /当前 第 ji 个 点 的 Y 值 (tooltip 共享 的 情况 下 ， 关 
于 共享 见 下 方 说 明 ) 

。 this.point /this.point[] : 当前 点 /当前 第 i 个 点 (tooltip 共享 的 情况 下 ) 

。 this.series / this.pointli].series : 当前 数据 列 / 当前 第 i 个 点 的 数据 列 (tooltip 共 享 ) 

e this.total 


e this.percentage 


所 有 的 可 用 属性 可 以 通过 console.log(this) 来 查看 


小 技巧 : 通过 console.log() 可 以 很 清楚 的 看 到 对 象 中 的 所 有 属性 及 值 ， 这 在 调试 的 时 候 非常 
好 用 。 
pointFormatter 


数据 提示 框 中 单个 点 的 格式 化 函数 。 默 认 是 : 


pointFormatter: function() { 
return '<span style="color:{'+this.series.color+'}">u25CF</span> {'+ 
this.series.name+'}: <b>{'+this.y+'}</b><br/>." 


2、 格 式 化 字符 串 
格式 化 字符 串 是 格式 化 函数 的 简化 版 ， 是 一 种 利用 特殊 符号 加 变量 字符 的 形式 来 代替 函数 的 
headerFormat 


数据 提示 框 头 部 格式 化 字符 ， 默 认 是 : 


<Span style="font-size: 10px">{point.key}</span><br/> 


pointFormat 


单个 点 的 格式 化 字符 串 ， 实 现 的 内 容 同 pointFormatter， 默 认 实 现 是 : 


<Span style="color:{series.color}">u25CF</span> {series.name}: <b>{point.y}</b><br/>. 


对 比 下 pointFormatter 和 pointFormat 我 们 可 以 知道 两 两 种 方式 的 差别 : 


。 pointFormat 更 简单 ， 适 用 于 简单 的 内 容 格 式 化 
e。 pointFormatter 更 灵活 ， 适 用 于 相对 复杂 的 自 定义 内 容 


上 述 两 个 观点 也 就 是 格式 化 函数 和 格式 化 字符 串 的 优 缺 点 ， 在 使 用 的 时 候 ， 请 


3、 时 间 格 式 化 


灵活 运用 。 


在 时 间 图 表 中 ， 很 常见 的 一 个 需求 是 时 间 的 格式 化 显示 ， 在 数据 提示 框 中， 我 们 可 以 通过 时 


间 格 式 化 来 统一 时 间 的 显示 。 
dateTimeLabelFormats 


数据 框 中 的 时 间 点 的 格式 化 ， 默 认 实 现 是 : 


{ 
millisecond:"%A, %b %e, %H:%M:%S.%L", 
second:"%A, %b %e, %H:%M:%S", 
minute:"%A, %b %e, %H:%M", 
hour:"%A, %b %e, %H:%M", 
day:"%A, %b %e, %Y", 
week: "Week from %A, %b %e, %Y", 
month:"%B %Y", 
year:"%Y" 

} 


关于 时 间 格 式 化 中 字符 的 
xDateFormat 

数据 提示 框 头 部 时 间 格 式 化 字符 串 。 
在 线 试 一 试 


4、html 内 容 


数据 提示 框 默认 (在 没 开启 支持 HTML 模式 的 情况 下 ) 支持 少量 的 HTML 标签 


&lt;b&gt; ~ &lt;br&gt; 
~ &lt;strong&gt; ~ &lt;i&gt; ~ &lt;em&gt; 、 &]lt;br/&gt; 、 &]lt;spanggt; 
可 以 通过 style 属性 来 指定 ， 不 过 仅 限 文字 相关 的 CSS 样式 属性 。 


， 包括 


， 标签 的 内 容 


通过 设置 tooltip,useHTML = true 可 以 开启 HTML 模式 ， 即 可 以 用 纯 HTML 内 容 来 演 染 数据 
提示 框 (默认 是 以 SVG 泻 染 ) 。 


开启 HTML 模式 后 ， 就 可 以 给 提示 框 添加 链接 、 图 片 、 表 格 等 HTML 元 素 ， 给 提示 框 添加 表 
格 的 示例 代码 是 : 


tooltip: { 
shared: true, 
useHTML: true, 
headerFormat: '<small>{point.key}</small><table>', 
pointFormat: '<tr><td style="color: {series.color}">{series.name}: </td>' + 
"<td style="text-align: right"><b>{point.y} EUR</b></td></tr>', 
footerFormat: '</table>', 
valueDecimals: 2 


在 线 试 一 试 
5、 值 的 前 级 、 后 组 及 小 数 点 


在 展现 数据 信息 是 ， 我 们 经 常会 给 数据 添加 一 些 修饰 信息 ， 例 如 数据 单位 。highcharts 提供 了 
valuePrefix、valueSuffix 来 给 数据 添加 前 级 及 后 级 。 


tooltip: { 
valuePrefix: "' 圣 '， 
ValueSuffix: “元 ' 


另外 ， 对 于 小 数 点 的 处 理 ， 可 以 通过 valueDecimals 来 指定 保留 小 数位 数 (当然 可 以 通过 格 
式 化 函数 来 进行 更 复杂 的 处 理 ) 。 


在 线 试 一 试 


对 于 多 个 数据 列 数据 提示 框 添加 后 级 时 ， 一 般 是 将 属性 分 别 配置 在 数据 列 中 ， 实 例 : 


series: [{ 
name: "Rainfal1 ' ， 
type: 'column', 


yAxis: 1, 
data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4 
tooltip: { 
valueSuffix: ' mm' 
} 
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name: 'Temperature', 
type: 'spline', 
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6], 
tooltip: { 
valueSuffix: '°C!' 
} 


}] 
训 四 
在 线 试 一 试 








、 多 个 数据 列 共 用 一 个 提示 框 (Shared ) 


多 个 数据 列 的 图 表 中 ， 常 常 需要 对 多 个 数据 列 的 数据 做 对 比 ， 将 多 个 数据 列 的 相同 分 类 同时 
展示 在 数据 提示 框 中 也 是 非常 常见 的 需求 ， Highchart 中 ， tooltip.shared 的 作用 就 是 将 多 
个 数据 分 享 到 同一 个 数据 提示 框 中 ， 也 就 是 多 个 数据 共用 的 数据 提示 框 。 


在 线 试 一 试 
三 、 其 他 特性 


1、 十 字 准 星 
crosshairs 有 三 种 配置 形式 ， 最 基础 的 是 设置 crosshairs = true 表示 启用 坚 直方 向 准星 线 ， 三 
种 设置 方式 是 : 


crosshairs: true // 启用 坚 直方 向 准星 线 
crosshairs: [true，true] // 同时 启用 坚 直 及 水 平 准星 线 


crosshairs: [{ // 设置 准星 线 样式 
width: 3, 
color: 'green' 
}, { 
width: 1, 
color: "#006cee", 
dashstyle: 'longdashdot"', 
zIndex: 100 
}] 
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在 线 试 一 试 


通过 配置 tooltip.positioner 可 以 让 数据 提示 框 以 固定 位 置 显示 ， 实 例如 下 


positioner: function() { 


return { 
x: 60, 
y: 80 
} 


其 中 XxX 表示 相对 图 表 右 上 角 水 平 偏 移 ，y 为 坚 直方 向 的 偏 移 。 
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在 线 试 一 斌 
3、 鼠 标 行为 
。 stickyTracking : 设置 提示 框 触发 模式 ， 默 认 是 鼠标 在 点 的 附近 就 触发 提示 框 ， 设 置 false 
后 只 有 鼠标 划 过 点 才 触 发 
。 hideDelay : 提示 框 隐 藏 延迟 时 间 
四 、 第 见 问题 
1、 提 示 框 乱码 了 怎么 办 ? 


通过 上 面 的 学 习 我 们 知道 ， 数 据点 的 默认 格式 化 内 容 是 : 


<Span style="color:{series.color}">u25CF</span> {series.name}: <b>{point.y}</b><br/>. 


其 中 的 Au25CF"” 是 一 个 Unicode 码 ， 也 是 导致 乱码 的 根源 ， 最 简单 的 解决 办 法 有 两 种 : 


1) 将 你 的 页 面 编码 设置 UTF-8 


<!DOCTYPE htmJ> 
<html lang="en"> 


<head> 

<meta charset="UTF-8"> // 设置 网 页 编码 
</head> 
// ..， 省 略 代 码 


2) 重 写 提示 框 数据 点 格式 化 函数 或 格式 化 字符 串 ， 例 如 将 pointFormat 重 写 为 : 


<Span style="color:{series.color}"></span> {series.name}: <b>{point.y}</b><br/>. 


2、 提 示 框 被 文字 标签 覆盖 了 怎么 办 ? 
3、 如 何在 外 部 触发 提示 框 ? 
见 : 论坛 帖子 


即 调用 chart.tooltip.refresh() 函数 实现 〈 内 部 没有 公开 函数 ， 通 过 研究 源码 才 知 道 这 个 函 
数 的， 研究 源码 非常 有 意义 1 ) 


(正文 完 ， 最 后 更 新 时 间 : 2015-06-09 20:46:02 ) 
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图 例 (Legend) 


图 例 是 图 表 中 用 不 同形 状 、 颜 色 、 文 字 等 标示 不 同 数据 列 ， 通 过 点 击 标示 可 以 显示 或 隐藏 该 
数据 列 ; 通过 设置 legend.enabled = true | false 来 打开 或 关闭 图 例 。 


Combination chart 
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Total fruit consumption 





Plums 
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图 例 容 器 指 的 是 整个 图 例 容 器 的 样式 ， 包 含 背 景 、 边 框 、 边 距 、 宽 度 等 ， 详 细 属 性 及 说 明 见 


图 例 《Legend ) 56 


小 


参数 名 
backgroundColor 
borderColor 
margin 

padding 
maxHeight 


navigation 


shadow 


width 


verticalAlign 


USeHTML 


2、 图 例 项 样式 


背景 颜色 
边框 颜色 
外 边 距 
内 边 距 
最 大 高 度 


导航 ， 当 设置 了 最 大 高 度 后 
则 会 用 导航 的 形式 展示 (分 


图 例 阴 影 效果 ， 赋 值 可 以 是 boolean 或 Object， 详 见 
API 文 档 


图 例 宽度 
重 直 对 齐 方式 ， 有 'top'，'middle' 及 'bottom' 可 选 


是 否 以 HTML 形 式 泻 染 (默认 是 SVG 泻 染 ) ， 当 使 用 
HTML 模式 泻 娄 是， 图 例 导 航 无 效 


图 例 无 法 完整 显示 时 ， 
) 


页 ) ， 详 见 API 文 档 


默认 值 
null 
才 909090' 
15 


上 面 说 到 了 图 例 容器 的 样式 可 以 控制 图 例 整 体 样式 ， 对 应 配置 图 例 里 的 内 容 是 通过 图 例 项 相 
关 属 性 来 控制 的 ， 见 下 表 











参数 名 解释 默认 值 
| IH 
itemDistance 人 20 
距 
itemStyle 图 例 样 式 temStyle: { cursor: 'pointer', color: '#3E576F' } 
中 有 急 藏 
itemHiddenStyle 0 itemHiddenStyle: { color: '#CCC' } 
图 例 鼠 标 
itemHoverStyle 划 过 时 样 itemHoverStyle: { color: '#000' } 
式 
. . 图 例 项 底 
itemMarginBottom 边 距 0 
. | 图 例 项 顶 
itemMarginTop 部 边 距 0 
| 项 宝 
itemWidth | 
上 度 
图 例 项 标 
symbolHeight | 汉 
， 图 例 项 标 
symbolPadding 示 内 边 距 9 
图 例 项 标 
symbolRadius 示 圆 角 2 
项 村 
symbolWidth 图 例 项 标 | 6 


kk 
示 先 度 


二 、 图 例 内 容 及 定位 


1、 图 例 内 容 





参数 名 解释 默认 值 


图 例文 字 格 
式 化 字符 串 


图 例 内 容 格 
式 化 函数 


labelFormat {name} 


labelFormatter function() { return this.name} 


reversed 是 否 倒 序 false 


文字 是 否 显 
示 在 符号 前 
面 ， 主 要 针 


对 阅读 习惯 。 5 


rtl 


title 图 例 标 题 titlen etext nulle style: fontweignes blod yy 
关于 格式 化 函数 及 格式 化 字符 串 这 里 简单 说 明 如 下 : 


labelFormatter: function() { 
Ves 
* ”格式 化 函数 可 用 的 变量 : this， 可 以 用 console.1og(this) 来 查看 包含 的 详细 信息 
* this 代表 当前 数据 列 对 象 ， 所 以 默认 的 实现 是 return this.name 


HY 
return this.name + '(Click to hide or show)'; 
SS 

Chart title 
250 


-@- Series 1(Click to hide or show) 
—* Series 2(Click to hide or show) 


200 f/f 


自 定义 图 例 内 容 
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Highcharts.com 
在 线 试 一 试 


| (Legend) 


1 


J 


C 
CD 


labelFormat 格式 化 字符 是 格式 化 函数 的 一 种 简写 方式 ， 即 用 包含 变量 的 字符 串 代 替 函 数 。 
对 于 上 面 格式 话 函 数 的 代码 ， 完 全 可 以 用 更 简洁 的 方式 实现 : 


labelFormat: '{name} (Click to hide or show)'; 


在 线 试 一 试 


\ 


~ 
v 


2、 定 人 


下 面 是 图 例 位 置 的 确定 的 一 些 配置 。 


参数 名 解释 默认 值 
align 图 例 在 图 表 中 的 对 齐 方 式 ， 有 “left”, "center", "right" 可 选 “center” 
floating ”图 例 是 否 浮动 ， 设 置 浮动 后 ， 图 例 将 不 占 位 置 false 
layout ' de 人 0 "horizontal" 
x 水 平 偏 移 0 

y 坚 直 偏 移 0 


三 、 图 例 事件 
图 例 上 默认 的 点 击 行为 是 显示 或 隐藏 当前 数据 列 。 


plotOoptions: { 
series: { 
events: { 
legendItemClick: function(e) { 
A 
* 默认 实现 是 显示 或 隐藏 当前 数据 列 ，@ 代表 事件 ， this 为 当前 数据 列 
“7 


禁用 图 例 点 击 隐藏 效果 


plotOoptions: { 
series: { 
events: { 
legendItemClick: function(e) { 
return false; // 直接 return false 即 可 禁用 图 例 点 击 事件 


} 


在 线 试 一 试 


上 述 代 码 对 人 饼 图 是 无 效 的 ，API 给 出 的 说 明 如 下 
Not applicable to pies, as the legend item is per point. See point.events. 


也 就 是 对 于 饼 图 对 应 legendltemClick 事件 是 point.legengltemClick 。 


plLotoptions: { 


pie: { 
point: { 
events: { 
legendItemClick: function(e) { 
return false; // 直接 return false 即 可 禁用 图 例 点 击 事件 
} 
} 
} 
} 
} 
在 线 试 一 试 


改变 图 例 点 击 默 认 响 应 (默认 是 点 击 某 个 图 例 显示 或 隐藏 当前 数据 列 ， 这 里 改变 为 点 击 某 个 
图 例 只 显示 当前 数据 列 ， 隐 藏 其 他 数据 列 ) 
plLotoptions: { 
series: { 
events: { 
legendItemClick: function(e) { 
var index = this.index; 
var series = this.chart.series,; 
if (!series[index].visible) { 
for (var i = 0; i < series,.length; i++) { 
var s = series[i]; 
i === index ? s.show() : s.hide(); 
} 


return false; 


在 线 试 一 试 
四 、 关 于 图 例 的 常见 问题 
以 下 列举 出 关于 图 例 的 常见 问题 ， 


1、 如 何不 显示 某 个 数据 列 的 图 例 


1) 设置 showlnLegend 


series: [{ 


data: [], 

name: ™™", 

showInLegend: false // 设置 为 false 即 为 不 显示 在 图 例 中 
}, { 

data: [], 

name: ™™", 


showInLegend: true // 默认 值 
}] 


2) 自 定 义 图 例 格 式 化 函数 


legend: { 

Jayout: 'vertical', 

backgroundColor: '#FFFFFF', 

floating: true, 

align: 'left', 

verticalAlign: 'top', 

x: 90, 

V 45 

JabelFormatter: function() { 
he 
* 获取 数据 列 下 标 ， 通 过 下 标 判 断 做 一 系列 处 理 
* 还 可 以 通过 获取 数据 列 名 字 等 来 做 判断 (通过 console.1log(this) 来 查看 数据 列 详细 信息 ) 
0 
var index = this. i; 


// return null 则 可 以 不 显示 图 例 项 
return index === 0 ? null : this.name; 


在 线 试 一 试 

2、 图 例 是 否 可 拖 动 

可 以 ， 利 用 官方 插件 “Draggable Legend” 即 可 实现 
3、 是 否 可 以 在 图 例 中 显示 数值 

可 以 ， 同 样 是 通过 官方 插件 实现 ， 见 “Vlue in legend” 


更 多 图 例 相 关 的 插件 见 : http://www.hcharts.cn/p/index.php?s=legend 


(正文 完 ， 最 后 更 新 时 间 : 2015-08-06 21:12:50) 


版 权 信 息 (credits ) 


图 表 版 权 信息 。 et 包含 链接 的 文字 ， 默 认 是 文字 是 Highcharts， 链 接 是 


Highcharts 官 网 地 址 。 通 过 指定 credits.enabled=false 即 可 不 显示 该 信息 。 
Chart title 
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200 
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HCharts.cn 
一 、 版 权 信 息 的 常用 属性 
版 权 信 息 常用 的 属性 包括 是 否 启 用 版 权 信 息 、 、 链接 、 位 置 等 ， 详 细 列 表 如 下 : 
属性 名 描述 默认 值 
enabled ”是 否 显 示 版 权 信息 true 
版 权 信息 点 击 之 后 指向 的 URL( 设 置 自己 版 权 信 、 : 
href 息 } 也 址 时 记得 加 “http: /站 http://www.highcharts.com 
text 显示 的 版 权 信息 文字 Highcharts.com 
文字 显示 位 置 。 支 持 的 属性 有 align( 左 右 对 position: { align: 'right', x 
position 齐 ),ve ns ), x(X 轴 偏 移 量 ), y(y -10, verticalAlign: 'bottom 
轴 偏 移 量 ) y: -5} 
style: { cursor: ' pointer ， 
style 版 权 信 息 标签 的 CSS 样 式 color: #909090'", fontSize: 


'10px'} 


没有 更 多 属性 了 ， 请 参考 API 文 档 : credits 


二 、 版 权 信 息 常见 设置 

1、 屏 蔽 版 权 信息 

版 权 信息 是 默认 显示 的 ， 若 不 需要 可 以 通过 增加 代码 : 
credits:{ 


enabled:false // 禁用 版 权 信 息 
了 


如 果 你 觉得 在 每 个 图 标 中 都 配置 credits.enabled 很 麻烦 ， 你 也 可 以 通过 修改 highcharts 源 
码 来 针对 所 有 的 图 表 禁 用 版 权 信 息 。 
2、 人 设置 位 置 


默认 右 下 角 ，align 可 配置 参数 left 、 right 、 center ; VerticalAlign 可 配置 参 
数 : bottom 、top 、middle ; X 和 y 分 别 配 置 的 是 指定 位 置 的 偏 移 量 ， 负 数 代表 向 左 或 向 
上 偏 移 ， 正 数 代 表 向 右 或 者 向 下 偏 移 。 


3、 完 整 的 例子 


credits:{ 
// enabled:true, // 默认 值 ， 如果 想 去 掉 版 权 信 息 ， 设 置 为 false 即 可 
text: 'www.hcharts.cn', // 显示 的 文字 
href:'http://www.hcharts.cn', // 链接 地 址 
position:{ // 位 置 设置 
align: "left'， 
x: 400, 
verticalAlign: 'bottom', 
y: -100 
}, 
style: { // 样式 设置 


cursor: "pointer '， 
color: 'red', 
fontSize: '30px' 


在 线 试 一 试 


(正文 完 ， 最 后 更 新 时 间 : 2015-06-10 11:08:26 ) 


HTML 标 签 (labels ) 


HTMI 标 签 (Lables) 指 的 是 可 以 放置 在 图 表 中 任意 位 置 的 文字 标签 ， 由 于 最 终 的 文字 标签 是 

以 SVG 泻 染 的 ， 所 以 标签 的 内 容 只 支持 少量 的 HTML 标签 ， 包 

括 : &lt;b&gt; ~ &lt;strong&gt; 、 &lt;i&gt; 、 &ilt;em&gt; 、 &lt;br/&gt; ~ &]t;spanggt; 
， 其 中 可 以 通过 style 属性 来 设 定 样式 ， 但 是 有 效 的 样式 仅 限 和 文字 相关 的 属性 。HTML 标签 
的 基本 构造 是 : 


Jabels: { 
style: { // 标签 全 局 样式 
color: "#ff0000"， 
fontSize: '12px', 
fontweight: 'normal', 







fontFamily: '' 
}, 
items: [{ // items 数组 ， 可 以 设置 多 个 标签 
html: 'html 标签 内 容 '， 
style: { // 标签 样式 ， 会 继承 和 重 写 上 层 全 局 样式 
left: '50px', 
top: '100px', 
color: 'red', 
fontSize: '12px', 
fontweight: "normal '， 
fontFamily: '' 
} 
}] 
}, 
Chart title 
250 
200 
150 Labels 1 : HCharts.cn 
, 
3 HTML 标签 
100 
bels 2 : HCharts.cn 
50 
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-©®- Series 1 


在 线 试 一 试 


扩展 内 容 


通过 学 习 上 面 的 内 容 我 们 知道 ，HTMI 标 签 只 能 添加 简单 的 文字 标签 ， 并 且 只 能 是 在 图 标 初始 
化 的 时 候 才能 添加 ， 那 么 六 对 干 汪 轴 六 机 蒜 丰 Jialialis 光春 才 永生 站 闹 在 扒 避 光 


答案 是 有 的 ， 对 应 的 API 是 [Renderer](http://www.hcharts.cn/api/index.php#Renderer) 。 


Renderer 是 一 个 提供 了 原始 绘图 接口 的 对 象 ， 可 以 直接 在 图 表 上 绘制 基础 的 图 形 ， 包 括 贺 
、 拢 形 、 线 条 、 文 字 等 ， 在 主流 浏览 器 中 ， 对 应 的 是 SVG 封装 ，IE8 以 下 则 是 VML 封 


Renderer 可 以 通过 chart.renderer (chart 为 已 经 存在 的 图 表 对 象 ) 或 Highcharts.Renderer() 
方式 调用 ， 对 应 的 初始 化 方式 有 所 不 同 : 


chart .renderer 


Highcharts.Renderer(parentNode, width, height); 
其 中 parentNode 表示 图 形 希 望 被 添加 到 的 html 元 素 (dom) 。 


Renderer 支持 链 式 编程 ， 即 可 以 在 同一 个 表达 式 中 多 次 调用 相关 的 函数 ， 例 如 


chart.render.rect( 


// ..， 省略 代码 
).attr( 

// ..， 省 略 代 码 
).css( 

// ..， 省略 代码 


); 


更 多 关于 Renderer 的 信息 请 参看 AP| 文档 : Renderer。 
通过 Renderer 给 图 表 添 加 文字 标签 


1、Renderer.text() 
构造 方法 : Renderer .text(String str, Number x, Number y) 


参数 列表 : 


String Str: 需要 添加 的 文字 
Number x: ”水 平 偏 移 
Number y: ” 坚 直 偏 移 


在 线 试 一 试 
2、Renderer.label() 
Renderer.label() 支持 更 多 高 级 属性 ， 例 如 边框 ， 背 景 等 。 


构造 方法 : 


Renderer .Jabel (String str, Number x, Number y, String shape，Number anchorX, Number ancho 


参数 列表 : 
String str: 标签 内 容 
Number x: 水 平 偏 移 
Number y: 坚 直 偏 移 
String shape: 形状 
Number anchorX: 如果 形状 中 包含 指示 ， 例 如 chevron 和 callout。anchorX 指定 指示 形状 的 x 位 置 
Number anchorY: 如果 形状 中 包含 指示 ， 例 如 chevron 和 callout。anchorY 指定 指示 形状 的 y 位 置 


Boolean useHTML: 是 否 开 启 HTML 模式 来 演 染 标签 
Boolean baseline: 是 否 让 标签 以 文字 的 baseline 来 坚 直 对 齐 
String className: 标 签 的 父 级 元 素 g 的 类 


Highcharts custom label 


最 大 值 
自 定义 标签 -一 


250 


200 


150 


Values 


100 


50 





Jan Feb Mar Apr May Jun jul Aug Sep Oct Nov Dec 


-全 -Series 1 


Highcharts.com 


在 线 试 一 试 


(正文 完 ， 最 后 更 新 时 间 : 2015-06-15 11:50:33) 


标示 线 〈plotLines ) 


标示 线 是 用 来 标记 坐标 轴 上 特殊 值 的 一 条 直线 ， 在 绘图 区 内 绘制 一 条 自 定 义 的 线 。 标 示 线 总 
是 重 直 于 它 属于 的 轴 。 它 可 单独 定义 在 X 轴 或 y 轴 ， 也 可 以 同时 定义 在 X 轴 和 y 轴 。 如 果 标 示 线 
同时 定义 在 x 轴 和 y 轴 ， 定 义 在 y 轴 的 标示 线 会 显示 在 前 面 。 具 体 实例 如 下 : 


1、 在 x 轴 上 值 为 3 的 地 方 画 一 条 红色 的 宽度 为 2px 的 线 


XxAxis: { 

// ..， 省 略 代 码 

plotLines:[{ 
color:'red', // 线 的 颜色 ， 定 义 为 红色 
dashstyle:'longdashdot',// 标 示 线 的 样式 ， 默 认 是 solid ( 实 线 ) ， 这 里 定义 为 长 虚线 
value:3, // 定 义 在 哪个 值 上 显示 标示 线 ， 这 里 是 在 Xx 轴 上 刻度 为 3 的 值 处 重 直 化 一 条 线 
width:2 // 标 示 线 的 宽度 ，2px 

}] 

} 


ss 


2 、 在 y 轴 画 一 条 和 x 轴 一 样 的 红色 的 2px 的 线 


yAxis: { 
// ..， 省 略 代码 
plotLines:[{ 
color:'red', // 线 的 颜色 ， 定 义 为 红色 
dashstyle:'solid', // 上 默认 值 ， 这 里 定义 为 实 线 
value:3, // 定 义 在 那个 值 上 显示 标示 线 ， 这 里 是 在 X 轴 上 刻度 为 3 的 值 处 重 直 化 一 条 线 
width:2 // 标 示 线 的 宽度 ，2px 
}] 
} 


| 


上 述 定 义 的 两 个 标示 线 效果 如 下 图 所 示 : 


Highcharts 中 文 禾 程 


Monthly Average Temperature 
Source: WorldClimate.com 
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一 、 标 示 线 的 常见 属性 


标示 线 是 X 轴 或 y 轴 上 的 标记 特殊 刻度 的 线 ， 它 的 属性 包括 了 颜色 ， 事 件 ，id， 标 签 ， 和 zlndex 
层 登 ， 常 见 属性 如 下 表 所 示 : 


属性 名 描述 > 
color 标示 线 的 颜色 null 
dashStyle ”标示 线 的 线条 样式 ， 上 默认 是 solid， 即 直线 型 ， 更 多 下 面 详 细 说 明 'solid' 
events 标示 线 的 事件 ， 详 细 事 件 下 文 详 解 null 
id 定义 标示 线 ， 在 Axis.removePlotLine 中 定义 去 除 那 条 标示 线 null 
value 在 坐标 轴 上 显示 的 位 置 null 
label 标示 线 的 文字 标签 ， 用 来 描述 标示 线 null 
width 标示 线 的 宽度 null 
二 层 登 ， 标 示 线 在 图 表 中 显示 的 层 各 级别 ， 值 越 大 ， 显 示 越 向 前 ， ee 

默认 标示 线 显 示 在 数据 线 之 后 
常用 属性 详解 


1、Labels : 标签 


标签 是 对 标示 线 的 一 个 文字 说 明 ， 文 本 值 默 认 会 显示 在 标示 线 的 上 部 。 给 标示 线 添加 一 个 标 
签 的 实例 代码 如 下 : 


(plotLines) 


plotLines:[{ 
// 


, ,1 省 略 代码 

Jabel:{ 
text:' 我 是 标示 线 的 标签 '， 
align:'left', 
x:10 

} 

}] 
加 


// 标 签 的 内 容 
// 标 签 的 水 平 位 置 ， 水 平 居 左 ， 默认 是 水 平 居 中 center 


// 标 签 相对 于 被 定位 的 位 置 水 平 偏 移 的 像素 ， 重 新 定位 ， 水 平 居 左 10p. 





2、dashStyle : 线条 样式 


线条 有 直线 型 、 虚 线 型 等 ， 所 有 的 线条 及 样式 如 下 图 所 示 : 


Solid 


ShortDash 


上 图 所 示 的 线条 样式 同样 适用 于 Highcharts 图 表 中 所 有 线条 


3、Events : 事件 


Highcharts 为 标示 线 提供 了 很 多 相关 事件 ， 详 细 描述 如 下 


plotLines:[{ 
//...， 省略 代码 
events:{ 
click:function(){ 


// 当 标示 线 被 单 击 时 ， 触 发 的 事件 


}, 


mouseover :function(){ 


// 当 标示 线 被 鼠标 悬 停 时 ， 触 发 的 事件 


】 
mouseout :function( ) 
// 当 标示 线 被 据 标 移出 时 ， 触 发 的 事件 
}, 
mousemove:function(){ 
// 当 标示 线 被 鼠标 移动 (时 ， 触 发 的 事件 


}] 


一 陋 有 | 


更 多 关于 标题 的 属性 请 参考 API 文 档 : xAxis plotLines 、 yAxis plotLines 
二 、 动 态 增 加 或 删除 标示 线 
Highcharts 提 供 了 相应 的 函数 方便 在 图 表 绘 制 完 毕 后 对 标示 线 动态 的 增加 或 删除 操作 。 


1、 增 加 标示 线 
可 以 通过 addplotLine() 函数 增加 标示 线 ， 该 函数 的 构造 如 下 


addPlotLine (Object options) ， 其 中 options 是 一 个 plotline 对 象 ， 实 例 代 码 如 下 : 


var chart = new Highcharts.chart(); // Highcharts 构 造 函 数 
chart .xAxis[0].addPlotLine({ // 在 x 轴 上 增加 

value:2, // 在 值 为 2 的 地 方 

width:2, // 标 示 线 的 宽度 为 2DX 

color: '#FCFFCS5', // 标 示 线 的 颜色 

id: 'plot-line-1' // 标 示 线 的 jd， 在 删除 该 标示 线 的 时 候 需 要 该 id 标 示 
}); 


2、 删 除 标示 线 


Highcharts 提 供 函 数 removePlotLine() 供 动态 删除 标示 线 ，removePlotLine () 函 数 结构 如 下 : 
removePlotLine (id) 


参数 说 明 : id: 标示 线 的 id， 不 存在 该 id 时 ， 该 函数 式 无 效 的 


实例 代码 : 
var chart = new Highcharts.chart(); // Highcharts 构 造 函 数 
chart .xAxis[0].removePlotLine('plot-line-1'); // 把 id 为 plot-line-1 的 标示 线 删除 


通过 上 述 的 两 个 方法 ，addPlotLine() 和 removePlotLine(), 可 以 动态 的 实现 增加 和 删除 标示 线 ， 
需要 注意 的 是 ， 需 要 进行 删除 的 标示 线 ， 在 新 增 或 初始 化 的 时 候 需 要 给 其 id 属性 赋 唯 一 的 值 ， 
如 果 不 存在 id，removePlotLine() 会 失效 。 


在 线 试 一 试 
3、 在 仪表 图 和 雷达 图 中 的 标示 线 


在 仪表 图 (gauge) 和 雷达 图 (polar) 中 ， 定 义 在 x 轴 上 的 标示 线 将 会 显示 一 条 直线 ， 定 义 在 
y 轴 上 的 标示 线 将 会 显示 一 个 同心 圆 。 


(正文 完 ， 最 后 更 新 时 间 : 2015-12-01 18:46:56 ) 


Highcharts 中 文教 程 


标示 区 (plotBands) 





标示 区 同 标 示 线 ， 只 不 过 标示 的 内 容 为 一 段 范 围 。 标 示 区 的 作用 、 事 件 等 很 多 都 类 似 标 示 





线 ， 这 里 就 只 是 简单 说 明 标 示 区 的 相关 内 容 ， 不 做 过 多 累 述 。 
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一 、 标 示 区 的 基本 配置 


标示 区 (plotBands ) 


xAxis: { 


// ..， 省 略 代 码 
plotBands: [{ 
from: ， // 标示 区 开始 值 
to: ， // 标示 区 结束 值 
label: { // 标示 区 文字 标签 配置 ， 详 见 API 
}, 
color: '', // 标示 区 背景 颜色 
borderwidth: ， // 标示 区 边框 宽度 
borderColor: ， // 标示 区 边框 颜色 
下 // 标示 区 id， 用 于 删除 等 操作 
zIndex:, // 标示 区 层 登 ， 用 于 调整 显示 层次 
events: { // 事件 ， 支 持 click、mouseover、mouseout、mousemove 等 事件 
click: function(e) { 
}, 
mouseover: function(e) { 
}, 
mouseout: function(e) { 
}, 
mousemove: function(e) { 
b 
} 
}] 
}, 
yAxis: { 
// ..， 省 略 代码 
plotBands: [{ 
// 标示 区 配置 ， 同 上 
}] 
} 
在 线 试 一 试 


二 、 动 态 增 加 或 删除 标示 区 


同 标示 线 一 样 ， 我 们 可 以 通过 Axis.addPlotBand 及 Axis.removePlotBand 来 动态 增加 或 删除 
县 。 


一 
pa 
lh 
六 


1、 动 态 增 加 标示 区 


// 实例 化 图 表 并 保存 图 表 对 象 
var chart = new Highcharts.chart(); 


Var axis = chart.xAxis[0]; 


axis.addPlotBand({ 
id: 'myXAxisPlotBand', // id 用 于 后 续 删 除 用 
from: 20, 
to: 40, 
OA 
}); 


在 线 试 一 试 


2、 动 态 删 除 标 示 区 


var chart = new Highcharts ,Chart() ; 
var axis = chart.xAxis[0]; 


axis.removePlotBand( 'myXAxisPlotBand') 


在 线 试 一 试 


(正文 完 ， 最 后 更 新 时 间 : 2015-09-11 09:48:22 ) 


图 表 缩放 (Zoom ) 


图 表 缩 放 指 的 是 局 部 放大 或 缩小 图 表 ， 可 以 更 方便 的 查看 图 表 数 据 。 


Highcharts 支 持 两 种 方式 缩放 ， 缩 放 〈zoom) 和 平移 (panning) ， 并 且 是 完美 支持 移动 端 
手势 操作 的 。 


只 需要 简单 设置 zoomType 即 可 实现 图 表 缩放 ， 例 如 : 


$("#container").highcharts({ 
chart: { 
zoomType: 'x' 


让 
// ..， 省 略 代 码 
}); 


其 中 zoomType 取 值 为 x 、y 、 xy 中 的 一 个 ， 分 别 表 示 图 表 可 以 沿 X 轴 ，y 轴 ，xXxy 轴 放 
大 ， 也 就 是 水 平 、 坚 直 、 平 面 放 大 。zoomType 默认 值 是 None， 即 无 方法 功能 。 
在 线 试 一 试 
1、 重 置 缩 放 比 例 按 锂 
和 重 置 缩放 比例 按钮 先 关 的 配置 有 三 个 : 
。 resetZoomButton : 按钮 相关 配置 ， 详 见 API 文 档 
。 lang.resetZoom : 按钮 文字 
。 lang.resetZoomTitle : 按钮 标题 
在 线 试 一 试 
2、 选 中 样式 


selectionMarkerFil 为 选中 时 区 域 的 背景 填充 ， 指 为 颜色 (支持 颜色 代码 、 十 六 进 制 、rgb、 
rgba 形 式 ) . 


在 线 试 一 试 
3、 事 件 


图 表 缩 放 事件 处 理 函 数 ，chart.events.selection， 在 事件 处 理 函 数 里 ， 可 以 获取 缩放 相关 信 
息 ， 例 如 缩放 后 图 表 的 范围 ， 示 例 代码 


$("#container").highcharts({ 
chart: { 
events: { 
selection: function(e) { 
// 事件 处 理 代码 ， 可 以 通过 console.1og(e) 查看 更 多 详细 信息 


} 


}); 
缩放 事件 的 一 些 应 用 ， 例 如 需要 在 新 的 图 表 里 展现 当前 选中 的 范围 曲线 ， 而 不 是 放大 操作 ， 
这 时 候 就 需要 用 到 这 个 事件 函数 了 ， 相 关 说 明 见 中 文 社区 帖子 。 


在 线 试 一 试 


二 、 和 平移 (panning) 


图 表 缩 放 后 ， 我 们 还 可 以 进行 平移 操作 (Highstock 默认 就 是 平移 操作 ) 。 默 认 情 况 下 ， 
highcharts 是 没有 开启 平移 功能 的 ， 这 个 下 面 几 个 参数 相关 


e。 panning : 是 否 开启 平移 功能 ，highcharts 默认 是 false，highstock 默认 为 true 

。 panKey : 平移 按键 ， 对 应 的 是 键盘 的 键 名 ， 例 如 'Shift ， “ctr| 。 对 于 highcharts， 开 局 
平移 后 ， 还 需要 设置 pankey， 对 应 的 操作 是 缩放 图 表 后 ， 按 钮 指定 按键 就 可 以 平移 了 ; 
对 于 Highstock 则 没有 这 个 配置 ， 默 认 平 移 是 直接 拖 动 操作 的 。 


。 pinchType : 同 zoomType， 用 于 移动 端 手势 操作 缩放 方向 。 


(正文 完 ， 最 后 更 新 时 间 : 2015-10-26 09:29:35) 


语言 文字 (lang) 
图 表 中 的 文字 及 语言 相关 的 内 容 都 是 可 以 自 定义 及 本 地 化 的 ， 下 面 详 细 说 明 。 


一 、 语 言及 文字 


Highcharts 中 的 文字 可 以 通过 Highcharts.setOptions.lang 来 设 定 ，lang 属于 全 局 配置 


前 页 面 的 所 有 图 表 有 效 ， 对 应 的 汉化 后 的 配置 是 : 


// 全 局 配置 ， 对 当前 页 面 的 所 有 图 表 有 效 


Highcharts.setOptions({ 


lang:{ 
contextButtonTitle:" 图 表 导 出 菜单 "， 
decimalPoint:".", 


downloadJPEG: "下载 JPEG 图 片 "， 
downloadPDF:" 下 载 PDF 文 件 "， 
downloadPNG:" 下 载 PNG 文 件 "， 
downloadSVG:" 下 载 SVG 文 件 "， 
drillUpText:" 返 回 {series.name}", 
loading:" 加 载 中 "， 


， 对 当 


months: En, "月" = un "五 月 Ws I 六 0 Ws "和 八 月 IT ea IT a 1 十 一 Hu 可 


noData:" 没 有 数据 "， 

numericSymbols: [ wf 1 兆 " > 瑟瑟 | Es > |e ES 
printChart:" 打 印 图 表 " 

resetZoom:" 恢 复 缩放 "， 

resetZoomTitle:" 恢 复 图 表 "， 


shortMonths: [ "Jan" , "Feb" , "Mar™ , "Apr™” , "May” , "Jun™ , "Jul" , "Aug" ， 


thousandsSep:",", 
weekdays: Ce 是 基于 由 时 期 Su "星期 四 "， WD 天 2 


"Se 





在 线 试 一 斌 


二 、 时 间 及 时 区 


1、 时 间 格 式 化 


Highcharts 不 同位 置 的 时 间 显 示 可 以 通过 Rs 时 间 格 式 化 函数 、Highcharts.dateFormate 来 处 


理 ， 例 如 处 理 数据 提示 框 中 的 时 间 显 示 可 以 通过 下 面 的 方法 实现 : 
tooltip: { 
dateTimeLabelFormats: { 
year:"%Y", 
second:"%Y-%m-%d %H:%M:%S", 
A 


}, 
// 还 可 以 在 格式 化 函数 中 通过 调用 Highcharts.dateFormate() 函数 来 处 理 ， 总 之 是 非常 灵活 的 


对 于 x 轴 的 时 间 格 式 化 可 以 通过 下 面 的 方式 实现 : 


xAxis: { 
dateTimeLabelFormats: { 
year: '%Y', 
month: '%Y-%m"', 
dat: '%Y-%m-%d', 
A 
// 当然 还 可 以 通过 xAXxis .labels.formatter 函数 来 格式 化 


在 线 试 一 试 
对 于 其 它 地 方 需要 进行 日 期 格式 化 这 里 不 再 累 述 。 


2、 时 区 


通过 global.timezoneOffset 可 以 设置 时 区 ， 中 国 属 于 +8 区 ， 所 以 有 的 时 候 图 表 中 显示 的 时 间 
和 实际 时 间 相 差 8 个 小 时 ， 这 时 候 我 们 可 以 通过 设置 时 区 来 修正 ， 配 置 代 码 如 下 : 


Highcharts.setoptions({ 
global: { 
timezoneOffset: -8 * 60 // +8 时 区 修正 方法 
} 


}) 
三 、 符 号 
图 表 中 数值 显示 时 往往 带 有 格式 化 符号 ， 这 里 统一 说 明 如 下 : 


1 、 小 数 点 、 千 分 号 、 公 和 制 前 组 


Highcharts.setOptions({ 


decimalPoint: '.', // 小 数 点 号 ， 例 如 12.50 
thousandsSep: ' // 二 分 号 ， 例 如 12， 
numericSymbols: 'k,M,G,T,P,E' // 公 X 制 前 级 ， 通 过 设置 为 null 不 显示 12k，1.2M 这 种 形式 


}) 


2、 数 值 格式 化 函数 
通过 Highcharts.numberFormat 可 以 对 图 表 中 的 数值 进行 格式 化 ， 函 数 说 明 如 下 


Highcharts.numberFormat (Number number, [Number decimals], [String decimalPoint], 
[String thousandsSep]) 


参数 说 明 : 
e number 需要 格式 化 的 数值 


。 decimals 精度 ， 保 留 位 置 ， 可 选 参数 ， 默 认 是 0 
。 decimalPoint 小 数 符号 ， 可 选 参 数 ， 默 认 是 global.decimalPoint 


从 冬 


。 thousandsSep 千 分 符 ， 可 选 和 参数， 默认 是 global.numericSymbols 


点 击 查看 详情 


(正文 完 ， 最 后 更 新 时 间 : 2015-12-01 18:44:51) 


标签 及 字符 串 格式 化 (Format ) 


(正文 完 ， 最 后 更 新 时 间 : ) 


